line-height 能让单行文字“看起来”垂直居中，是因为它将多余高度均分到文字上下两侧，使内容区中线与容器中线重合；但仅适用于固定高度、纯 inline 内容的单行文本场景。
line-height 为什么能让单行文字“看起来”垂直居中
因为它不是真的把文字挪到容器正中间，而是通过控制「行框（line box）」的高度和内部对齐规则，让文本在视觉上居中。css 规范规定：当 line-height 大于字体本身的 em-box 高度时，多出来的空间会**均分到文字上下两侧**——也就是说，上半行间距 = 下半行间距 = (line-height − content-area) / 2。只要容器高度固定、且只有一行文本，把 line-height 设成和容器 height 相等，文字内容区的中线就自然落在容器中线上。
line-height 垂直居中只在这些条件下有效
它不是通用居中方案，而是一个有严格前提的“视觉技巧”：
- 容器必须是块级元素（如
div），且明确设置了height或min-height（不能是auto） - 内容只能是纯文本，或所有子元素都是
inline类型且未换行（比如span、a，但不能有display: block的子元素） - 不能同时依赖
padding来“留白”——line-height不处理内边距，它只撑开行框；加了padding后，文字会整体下沉 - 字体本身上下留白较大时（如某些 icon 字体），实际渲染位置会偏移，需额外用
transform: translateY()微调
为什么多行文本一用就错
因为 line-height 是按「每行」生效的。两行文本，就会生成两个独立的 line box，每个都按相同规则分配上下间距——结果是：第一行顶部有半行距，第二行底部也有半行距，但两行之间还是保持一个完整 line-height 的距离。最终整个文本块的总高度 ≈ 2 × line-height，远超容器，根本不会居中。
常见误判场景：
立即学习“前端免费学习笔记（深入）”；
- 文本里有换行符（
n）或<br>，哪怕肉眼只看到一行，浏览器也可能拆成多行渲染
- 父容器用了
white-space: pre-wrap或word-break: break-all，导致长单词被强制折行 - 响应式字号变化后，原本单行变双行，
line-height突然失效，且无报错提示
什么时候该果断放弃 line-height 居中
当你遇到以下任一情况，说明它已经超出能力边界，该换方案了：
- 需要居中的不只是文字，还有图片、按钮、SVG 等混合子元素
- 容器高度不固定（比如随内容伸缩、响应式变化）
- 要支持多行文本、富文本或用户可编辑内容（
contenteditable） - 项目需兼容老版 safari 或 IE11 以外的现代浏览器 —— 此时直接上
display: flex更稳
真正难的不是写对 line-height: 40px，而是意识到：它只解决一个极其狭窄的问题。一旦结构稍有松动，就得推倒重来。