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——它只解决一个非常窄的问题，一旦内容结构稍有变化，就得推倒重来。