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，文字却偏上或偏下？大概率掉进下面几个坑。

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

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

下载

• 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 就立刻失效。

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