line-height不能实现多行文本垂直居中，因其仅控制单行行框高度，多行时各行框堆叠顶部对齐，导致整体偏上或溢出；可靠方案是flexbox（display: flex + align-items: center）、grid或绝对定位+transform。
多行文本垂直居中必须用 display: flex + align-items: center，其他方案要么失效、要么兼容性差、要么行为不可控。
为什么 line-height 不行
它只对单行文本有效。一旦文字换行，line-height 就变成每行之间的间距，整体内容会堆叠在容器顶部，甚至溢出或被截断。常见错误现象是：按钮里两行字全挤在上半部分，看着像“没居中”，其实是 line-height 在干扰。
- 容器高度为
48px，却设了line-height: 48px→ 多行时每行都高 48px，总高度爆炸 - 给
button或div同时设height和line-height→ 两者冲突，文字上下偏移 - 响应式缩放字号后，
line-height数值不变，视觉错位更明显
display: table-cell 能用但不推荐
它确实能让多行文本在固定高度容器里垂直居中，靠的是激活 vertical-align: middle，但代价是语义污染和样式失控。
- 必须同时设置父容器的
height（如height: 150px），否则vertical-align无参照基准 -
display: table-cell会让元素失去margin、float、flex等能力，后续加动画或响应式逻辑容易卡住 - IE6/7 完全不支持；IE8–10 表现不稳定；现代项目里已无必要为它妥协
- 嵌套时继承行为难预测，比如子
div再设display: table-cell会直接失效
正确做法：Flex 布局三步到位
这是目前唯一能稳定处理任意行数、任意内容（文字、图标、混合块）的方案，Chrome 21+、Firefox 20+、Safari 6.1+、Edge 12+ 全支持。
- 给容器设
display: flex+align-items: center（垂直居中） - 加
justify-content: center可选，用于水平居中 - 容器必须有明确高度参考：用
height、min-height或足够padding，否则align-items没作用对象 - 不要给子元素（如
p或span）设margin: auto，Safari 旧版可能忽略或错位
.btn {
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
表格单元格（td/th）里怎么居中
表格原生支持 vertical-align: middle，但仅限纯文本或简单内联内容。一旦里面塞了 div、p 或按钮，就得切到 Flex。
- 基础写法：
td { vertical-align: middle; text-align: center; } - 含复杂内容时，改用：
td.flex-center { display: flex; align-items: center; justify-content: center; min-height: 40px; } - 别混用：
display: flex和vertical-align互斥，后者会被忽略 - 注意：IE10–11 对
min-height在 Flex 容器里的处理有 bug，必要时补height: 100%
真正容易被忽略的是：垂直居中是否“可见”，取决于容器有没有可感知的高度空间——哪怕只是靠 padding 撑出来的，也比空着强。没有这个基准，再对的 CSS 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
