line-height等于height仅在严格前提下才能垂直居中单行文本：容器高度固定、内容无换行（需white-space:nowrap）、无padding/border干扰、非flex/grid布局且字体一致；否则易失效。
line-height 等于 height 就能居中？先看前提条件
能用 line-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 = height 能居中？不是靠“对齐”，而是撑满
line-height 控制的是行框（line box）的最小高度，不是文字本身的上下边距。当它等于容器 height，且只有一行时，浏览器会把这一行文字的基线（baseline）放在行框正中——而行框又恰好填满容器，视觉上就居中了。
- 这个居中是“行框内默认行为”，不是 CSS 对齐指令，所以不依赖
vertical-align - 字体自身的 ascent/descent 会影响实际文字顶部到底部的距离，但只要
font-size不超过容器高度，误差通常可接受 - 如果用了 icon font 或超大字号，可能需要微调
line-height略大于height来补偿（比如height: 32px; line-height: 34px） - 单位要一致：别混用
px和em，否则 computed styles 里可能不相等
常见失效场景和 debug 方法
明明写了 line-height: 40px 和 height: 40px，文字却偏上或偏下？大概率掉进下面几个坑。
- DevTools 里检查 computed styles，确认最终生效的
line-height和height数值真的一致（注意继承来的font-size: 0会让行框塌陷） - 鼠标 hover 文字看是否被截断或换行——哪怕模板字符串里有个回车，也会让
white-space: nowrap失效 - 父容器用了
vertical-align: top或font-size: 0，会影响子元素行框计算 - 容器里混了
<span></span>、图标或inline-block元素，它们各自 baseline 不同，会导致整体错位 - Safari 旧版本对
inline-block容器里的line-height渲染不稳定，建议优先用 block 容器
什么时候不该硬套 line-height = height
这个技巧轻量高效，但边界非常清晰。一旦需求超出“纯单行、固定高、无交互”的静态文本，就该换方案。
立即学习“前端免费学习笔记（深入）”；
- 内容可能换行（比如响应式断点、用户输入）→ 改用
display: flex; align-items: center - 要兼容字体加载闪动（web font 切换时高度突变）→
flex更稳定 - 容器高度是动态的（比如由内容撑开、或用
vh单位）→line-height写死数值会失效 - 需要同时水平+垂直居中，且子元素是块级（如
<p></p>）→flex或grid才可靠
真正容易被忽略的，是“单行”这个前提——它不只是视觉上看起来像一行，而是 DOM 层面没有换行机会。哪怕一个空格没处理好，line-height 就立刻失效。
