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 却偏上/偏下？先看这些：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 是最轻量的解法，但也是容错率最低的。真正容易被忽略的，是它对“单行”和“盒模型干净”的绝对依赖，而不是数值本身。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！