line-height 实现垂直居中仅适用于单行纯文本且容器高度固定的块级元素；它通过设置行框高度使文本基于基线对齐，多行、inline-block 子元素或 padding 均会导致失效。
line-height 垂直居中的适用前提
line-height 实现文字垂直居中，只对**单行纯文本**有效。它本质是通过设置行框（line box）高度，让文本在该行框内基于基线（baseline）自动对齐，当 line-height 等于容器高度时，视觉上就“看起来居中”了。
常见误用场景：给多行文本、带 inline-block 子元素、或设置了 padding 的容器盲目设 line-height，结果错位或撑高容器。
- 容器必须是块级元素（如
div），且高度固定（height或min-height） - 内容只能是纯文本，或所有子元素都是
inline且无换行 - 不能同时设置
padding并期望line-height抵消——它不处理内边距，只控制行框高度
line-height 居中失效的典型错误
最常遇到的不是“写不对”，而是“用错了地方”。比如：
- 容器高度为
auto，line-height: 100px只会让每行高 100px，但容器仍由内容撑开 - 文本含
或换行符，变成多行，line-height对每行分别生效，整体不再居中 - 子元素用了
vertical-align: top或middle，干扰了行框内部对齐逻辑 - 字体本身有较大上下留白（如某些 icon 字体），实际渲染位置偏移，需额外用
transform: translateY()微调
与 flex / grid 的关键区别
line-height 是 CSS 2.1 的老办法，而 display: flex 和 display: grid 是现代布局方案。它们的根本差异在于：
立即学习“前端免费学习笔记（深入）”；
-
line-height依赖文本渲染机制，不改变文档流，也不作用于子元素布局 -
flex中align-items: center居中的是整个子元素（包括图片、按钮等），与行数无关 -
grid中place-items: center同样适用于任意类型子项，且支持多轴独立控制 - 性能上三者无明显差距，但
line-height在缩放或动态字号下容易失准，flex/grid 更鲁棒
安全可用的 line-height 居中写法
如果确认是单行文本、固定高容器，以下写法最稳妥：
div.text-center {
height: 40px;
line-height: 40px;
font-size: 14px;
text-align: center;
}
注意两点：
- 不要用
em或rem单位设line-height（除非你明确知道父元素字号），优先用px或无单位数值（如line-height: 2.5），避免嵌套计算偏差 - 若容器高度可能变化（如响应式），改用
flex更可靠；真要保兼容性，可结合@supports回退
真正难的不是写出居中代码，而是判断此刻该不该用 line-height——它只解决一个非常窄的问题，一旦内容结构稍有变化，就得推倒重来。
