最可靠解法是display: flex + justify-content: center + align-items: center，因line-height仅适用于单行固定高场景，多行时会撑开溢出、无法适配未知行数，且受字体缩放和响应式影响；flex需父容器有明确高度，子元素建议设display: block以防换行异常。
直接用 display: flex + justify-content: center + align-items: center，这是目前最可靠、最省心的解法。
为什么不用 line-height？
因为 line-height 必须等于容器高度才能垂直居中单行文字；一旦文本换行或行数不确定，它就失效——多行时会把整段文字“撑开”成巨大间距，甚至溢出容器。你没法预设一个 line-height 值去适配 1 行、3 行或 10 行。
- 常见错误现象：
div高度设为200px，line-height: 200px，结果三行文字被拉成一条竖线，顶部空白巨多 - 它只对“单行+固定高”场景有效，和“未知行数”这个前提根本冲突
- 字体缩放、响应式字号变化时，
line-height的像素值会失准
Flex 布局怎么写才不翻车？
关键不是加了 flex 就完事，得满足几个隐性条件：
- 父容器必须有明确高度（比如
height: 300px或min-height: 100vh），否则align-items: center没参照系 - 子元素如果是
span或其他 inline 元素，建议显式加display: block，避免换行错位 - IE11 对
min-height在 flex 容器里支持有问题，如果必须兼容，改用固定height或 fallback 方案 - 别在 flex 容器里再写
text-align: center来“辅助水平居中”——justify-content: center已经管了，多余且可能干扰
示例：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 250px; /* 必须有高度 */
border: 1px solid #ccc;
}
.content {
display: block; /* 防 span 换行异常 */
}
旧浏览器兼容怎么办？
如果项目要跑 IE9/10，flex 不可用，就得退回到绝对定位 + transform：
- 父容器加
position: relative - 子元素加
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 漏掉
transform就会偏移自身宽高的一半，而不是容器中心 - 这个方案对未知行数文本依然有效，但要注意：频繁重排（比如滚动中动态更新内容）会影响性能
真正容易被忽略的点是：你得先确认“居中”的目标对象——是让文字在它自己的父容器里居中，还是让整个容器在页面里居中。混淆这两层，写再多 text-align 或 margin: auto 都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
