单行文字垂直居中用 line-height 等于容器高度最快，但仅限固定高且不换行；多行或高度不确定时必须用 display: flex + align-items: center，其他方案均存在失效、兼容性差或行为不可控问题。
单行文本用 line-height 等于容器 height 最快；多行或高度不确定时，display: flex 是唯一可靠方案，其他方法要么失效、要么兼容性差、要么行为不可控。
单行文字：用 line-height + text-align 最轻量
这是零 JS、零额外 DOM、无兼容性问题的方案，但只适用于「固定高度容器 + 单行不换行」场景。
-
line-height必须和容器的height数值与单位完全一致（比如都是120px），否则视觉上会偏移 - 如果容器有
padding，height应该是内容区高度（即减去上下padding），否则文字会被挤出或截断 -
text-align: center只控制水平居中，对块级子元素无效；它作用对象是行内内容（如纯文本、span、img） - 一旦文字因宽度不足自动换行，
line-height就失去垂直居中意义——可能堆叠、错位，甚至被裁剪
多行/动态高度文字：必须用 display: flex 或 display: grid
当内容长度不可控、容器高度由内容撑开、或需响应式适配时，line-height 方案彻底失效。此时只有 flex 或 grid 能真正解决问题。
- 父容器设
display: flex+justify-content: center+align-items: center，子元素无需任何尺寸声明即可居中 -
align-items: center对齐的是整个子元素盒模型，不是每行文字基线；所以多行p或div也能整体垂直居中 -
display: grid可简写为place-items: center，语义更清晰，但 IE 完全不支持 - 别给子元素加
margin: auto——在 flex 容器里它可能被忽略，也可能干扰对齐逻辑，尤其在 Safari 旧版本中
为什么 vertical-align 和 text-align 直接写在 div 上不管用
这两个属性根本就不是为普通块级容器设计的：text-align 只影响其内部的行内内容水平对齐；vertical-align 只在 display: table-cell 或 inline-block 场景下生效。
- 写
div { text-align: center; vertical-align: middle; }，浏览器会默默忽略vertical-align，因为默认display: block不支持它 - 若强行给
div设display: inline-block，又得处理基线对齐导致的底部空白，还得确保父容器有明确高度，否则vertical-align: middle计算失准 - 用
display: table-cell虽然能工作，但语义污染严重——你不是在建表格，却用了表格布局模型，维护性和可访问性都打折
绝对定位 + transform 的坑比你想象的多
这个组合看似“通用”，实则依赖太多隐含条件，稍不注意就错位。
- 父容器必须设
position: relative，否则top: 50%会相对于视口计算 - 子元素必须有明确高度（至少能被浏览器计算出），否则
transform: translateY(-50%)的基准失准，文字可能悬空或贴顶 - 如果容器高度随内容变化（比如
min-height: 200px但内容超长），而子元素没设height，这个方案会彻底失效 - 不要混用
margin: auto和transform居中——Safari 13 及更早版本中行为不一致，且不利于后续加动画或缩放
真正难的不是选哪种方案，而是判断「容器高度是否可控」「内容是否可能换行」「是否要支持老浏览器」这三个条件。漏掉一个，就容易掉进 line-height 截断、flex 在 IE11 中缩成一团、或 transform 悬空的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
