line-height等于height仅在严格单行且盒模型干净时才能垂直居中；需满足height为确定值、white-space:nowrap、无干扰padding/border、非flex/table-cell显示模式等硬性条件，否则会失效。
line-height 等于 height 能居中，但只在严格条件下成立——不是写上就生效，而是前提一崩，立刻偏移。
为什么 line-height = height 有时不居中？
浏览器把单行文字放进一个“行框”（line box），line-height 控制的是这个行框的最小高度；当它等于容器 height，且行框恰好填满容器时，文字基线会自然落在行框正中，视觉上就居中了。但这依赖几个硬性条件：
- 容器
height必须是确定值（不能是auto、min-height或未计算的百分比） - 必须加
white-space: nowrap，否则换行符、空格或长单词会触发多行，行框高度失控 - 避免直接在容器上设
padding或border；若必须用，得配box-sizing: border-box，并让line-height对应内容区高度（比如height: 40px; padding: 8px;→line-height: 24px） - 禁用
display: flex或display: table-cell——这些 display 类型会忽略line-height的垂直对齐逻辑
常见失效现象和快速排查点
写了 line-height: 60px 和 height: 60px 却偏上/偏下？先看这些：
- DevTools 中检查 computed styles，确认最终生效的
line-height和height数值真的一致（注意父级font-size: 0会让行框塌陷） - 鼠标 hover 文字看是否被截断或意外换行——哪怕模板字符串里有个回车，也会让
white-space: nowrap失效 - 字体自身的 ascent/descent 会影响实际文字上下留白；若用了 icon font 或超大字号，可能需要微调
line-height略大于height（如height: 32px; line-height: 34px） - 单位必须统一：别混用
px和em，否则 computed 值可能不相等
什么时候该换别的方法？
只要出现以下任一情况，line-height 就不该再硬扛：
立即学习“前端免费学习笔记（深入）”；
- 容器高度由内容撑开（
height: auto） - 文字可能换行（哪怕概率很低）
- 容器本身是 flex/grid 子项，或已设
display: flex - 需要同时兼容 IE7–（此时考虑
display: table-cell + vertical-align: middle）
这时候该切到 flex、grid 或伪元素法——line-height 是最轻量的解法，但也是容错率最低的。真正容易被忽略的，是它对“单行”和“盒模型干净”的绝对依赖，而不是数值本身。
