单行文字垂直居中用 line-height 等于容器 height 最快；多行或高度不确定时必须用 display: flex 或 display: grid，其他方案失效或难控。
单行文字在固定高度容器里垂直居中，用 line-height 等于容器 height 最快；多行或高度不确定时，必须用 display: flex 或 display: grid，其他方案要么失效要么难控。
单行文字：用 line-height + text-align 最轻量
这是最直接、无兼容性问题的方案，但只适用于明确高度且内容不会换行的场景。
-
line-height必须和容器的height完全相等（单位一致），否则视觉上会偏移 -
text-align: center控制水平居中，对内联内容有效，但不能作用于块级子元素 - 如果容器设置了
padding，height应该是内容区高度（即减去上下 padding），否则文字会被挤出 - 一旦文字因宽度不足自动换行，
line-height就失去垂直居中意义，可能截断或堆叠
多行/动态高度文字：必须用 flex 或 grid
当内容长度不可控、容器高度由内容撑开、或需响应式适配时，line-height 方案彻底失效，flex 是当前事实标准。
-
display: flex配合justify-content: center和align-items: center，父容器无需固定高度也能居中 -
display: grid可简化为place-items: center，语义更清晰，但 IE 不支持 - 避免给子元素（如
p或span）设vertical-align——它对块级元素无效，且只在table-cell或inline场景下起作用 - 若父容器本身是
table或td，可直接用vertical-align: middle，但这是表格专属行为，别滥用到普通div
老浏览器兜底：绝对定位 + transform 仍可用但要小心
IE10+ 支持 transform，比纯负 margin 更安全，但依赖父容器 position: relative。
- 子元素必须有明确尺寸（至少高度），否则
top: 50%+transform: translateY(-50%)会计算失准 - 若父容器高度随内容变化，而子元素又没设
height，这个组合会“悬空”或错位 - 不要混用
margin: auto和transform居中，行为不可预测，尤其在 Safari 旧版中 - 该方案本质是“模拟居中”，不是布局逻辑居中，不利于后续扩展（比如加动画、响应式缩放）
真正容易被忽略的是：垂直居中从来不是单一样式能解决的事——它取决于容器类型、内容形态、是否换行、是否响应式。写完记得用不同字号、不同行数、不同视口宽度实测，flex 虽好，但嵌套过深或与 float 共存时也会意外失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
