line-height等于height仅在严格满足三条件时才可靠居中：容器高度明确、文本强制单行（white-space: nowrap）、无padding/border/flex等盒模型或布局干扰。
line-height 等于 height 就能居中？前提必须全满足
不能只写 line-height: 40px 就以为万事大吉。它生效有三个硬性条件：height 必须是明确数值（不能是 auto 或 100% 且父容器无高度）；文本必须是单行（否则行框堆叠，视觉错位）；容器不能有影响盒模型的干扰项。
常见翻车点：
-
padding或border会让实际内容区变小，但line-height是按容器总高计算的，结果文字偏上 -
font-size过大（比如 32px 配 40px height），字形可能溢出或视觉重心上移 - 用了
display: flex或display: grid，line-height直接被忽略——浏览器优先走 flex/grid 的对齐逻辑
为什么 line-height 能居中？不是靠“猜”，是靠行框规则
line-height 定义的是「行框（line box）」的高度，而单行文本的行框会自动填满块级容器（前提是没其他 inline 元素干扰）。当 line-height === height，行框上下留白均分，文字自然落在容器正中——这个居中是基于行框内容区的中点，不是字体本身的几何中心。
所以要注意：
立即学习“前端免费学习笔记（深入）”；
- 字体自身的 ascent/descent（上伸/下延）会影响视觉感受，但不影响
line-height的计算逻辑 - 如果用 icon font 或 SVG 字体，
font-size和实际图形尺寸不一致，需手动微调line-height略大于height -
vertical-align对纯文本无效（它只作用于 inline-level 元素间的相对位置），别乱加
white-space: nowrap 不是可选，是必须
只要文本宽度超过容器，换行就会发生，line-height 居中立刻失效——第二行会从第一行底部开始排布，整体向下偏移。所以 white-space: nowrap 是保底手段。
但要注意副作用：
- 超长文本会直接溢出容器，不换行也不隐藏，可能破坏布局
- 若需截断，得配合
overflow: hidden+text-overflow: ellipsis（注意：这要求元素是 block 或 inline-block，且有固定宽） - 响应式场景下，固定
width+nowrap可能导致移动端横向滚动，建议搭配max-width: 100%
和 flex 布局混用时，line-height 会被静默忽略
一旦容器写了 display: flex，哪怕只设了 justify-content: center，line-height 就完全不参与垂直对齐计算。这不是 bug，是规范行为：flex 容器的子项对齐由 align-items 控制，line-height 失去作用域。
如果你看到「加了 flex 却还想用 line-height」，说明设计意图混乱：
- 要居中文本 → 删掉
display: flex，回归height+line-height+white-space: nowrap - 要居中复杂内容（图标+文字、多子元素）→ 放弃
line-height，改用display: flex; align-items: center - 混合场景（如按钮内单行文字）→ 优先 flex，更可控；
line-height仅作为降级方案（IE10 以下）保留
真正难的不是写对那两行 CSS，而是判断当前场景是否「适合」用 line-height：它快、轻量、兼容性好，但边界极窄——只认单行、定高、无干扰的纯粹文本。稍有偏差，就得切到 flex 或 grid。
