line-height = height 不总居中，因文字基线对齐行框中心而非容器中心，受字体度量、换行、box-sizing、flex/grid布局及white-space等干扰。
line-height = height 为什么有时不居中
它不是“设置就居中”，而是浏览器把单行文字塞进一个高度等于 line-height 的行框（line box），再把文字基线放在这个行框正中。只要行框没填满容器，或者容器根本没给出行框可填满的空间，就会偏移。
常见失效现象：line-height: 40px 和 height: 40px 都写了，但文字明显靠上或靠下；DevTools 里看到 computed 的 line-height 是 normal 或远小于 40px；鼠标 hover 文字时发现被截断、有换行迹象。
- 父级设置了
font-size: 0，导致子元素行框塌陷（line-height按 0 计算） - HTML 模板字符串里藏了换行符或多余空格，
white-space: nowrap失效 - 容器用了
display: flex或display: table-cell，line-height被忽略 -
height是auto、min-height或未计算的百分比（如height: 50%但父容器没高）
必须写的三个 CSS 属性
只写 line-height 和 height 不够，缺一不可：
-
height必须是确定值（如40px、3rem），不能是auto或min-height -
line-height数值必须和height完全一致（单位也要统一，别混用px和em） -
white-space: nowrap必须加——哪怕内容看起来“肯定不会换行”，也要防模板回车、长英文单词、或用户粘贴富文本时带空格
如果容器有 padding 或 border，得先算清内容区高度：height: 40px; padding: 6px; → line-height: 28px，并配 box-sizing: border-box。
哪些场景会直接让 line-height 失效
一旦出现以下任一情况，line-height 就不该再硬套：
- 容器是
flex或grid子项（此时align-items: center才是正解） - 文字可能换行（哪怕概率低，比如用户输入昵称含长邮箱）
- 容器里混了
inline-block图标、img或其他内联元素（它们 baseline 不同，整体错位） - 用了 icon font 或超大字号（字体 ascent/descent 过大，需微调
line-height略大于height，如height: 32px; line-height: 34px）
这时候切到 display: flex; align-items: center 更稳，而不是反复调 line-height。
新手最容易忽略的细节
不是数值写错，而是前提崩了却没意识到：
- 在 Vue/React 模板里写
<div class="box">{{ text }}</div>，text 值里带换行符，white-space: nowrap白加 - 全局重置了
font-size: 0（比如为消除 inline-block 间隙），忘了在文字容器里重设font-size - 用
em或rem写line-height，但父级font-size变了，computed 值就飘了 - 以为加了
text-align: center就能解决一切，其实它只管水平，对垂直毫无影响
真正要盯住的，永远是「这容器是不是真的一行、真有固定高、真没干扰」——而不是盯着 line-height 的数字看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
