line-height 与 height 相等仍不居中，主因是盒模型干扰（如 padding/border 未计入内容区）、多类型内联元素基线对齐偏差、字体度量不均或布局上下文冲突（如 flex/grid 中 line-height 失效）；必须满足容器高度明确、纯单行、box-sizing: border-box、无 vertical-align 干扰、line-height 等于内容区高度这五项硬条件。
line-height 和 height 设成一样，文字还是不居中？那大概率不是数值没对齐，而是盒模型、内容类型或布局上下文在干扰。
为什么 line-height: 40px + height: 40px 还是偏上/偏下
line-height 居中依赖「单行内联内容」在「无额外干扰」下的默认基线对齐行为。一旦出现以下任一情况，视觉上就会失准：
-
padding或border没被算进内容区高度（box-sizing: content-box默认值） - 按钮里混了
svg、img或span，它们按 baseline 对齐，把整行“拉高” - 用了
font-size: 16px但字体本身 ascent/descent 不均衡（比如某些 icon font 或 system-ui） - 父容器是
display: flex或display: grid，此时line-height完全不生效 - 写了
vertical-align: top/middle/bottom在按钮或子元素上，和 line-height 冲突
line-height 居中必须满足的硬条件
想靠 line-height 稳住垂直位置，这五条缺一不可：
- 容器必须有明确的
height（不能是auto或由内容撑开） - 内容必须是纯单行——加
white-space: nowrap强制不换行 - 清除所有可能影响行框的干扰：设
box-sizing: border-box，显式重置padding和border - 避免子元素是
inline-block或带vertical-align，否则基线错位 -
line-height值应等于「内容区高度」，即height - padding-top - padding-bottom - border-top-width - border-bottom-width
什么时候该立刻放弃 line-height 改用 flex
只要遇到下面任意一种场景，line-height 就不再是“够用”，而是“埋雷”：
- 按钮要支持图标 + 文字混合（
svg+ 文本） - 响应式中按钮宽度会变窄，导致文字可能换行
- 用了 CSS 变量控制
font-size（如font-size: clamp(1rem, 2.5vw, 1.25rem)），line-height很难同步缩放 - 按钮是
position: absolute或嵌在flex/grid容器里 - 需要兼容 Safari 9.1 以下或旧版 Android WebView（
line-height在这些环境对中文渲染差异更大）
此时直接写 display: flex; align-items: center; justify-content: center;，比反复调 line-height 数值省心十倍——它不看字体度量，不care换行，也不吃 vertical-align 的亏。
最容易被忽略的兼容性细节
即使你已经切到 flex，仍有两个点常被跳过：
- 如果按钮是
display: inline-flex，记得检查父容器有没有设vertical-align（比如vertical-align: middle会覆盖 flex 的垂直对齐） - IE11 支持
align-items: center，但不支持align-items: center在flex-direction: column容器中正确工作——别在导航按钮这种关键交互组件里用 column + justify-content 模拟垂直居中
真正在意稳定性的项目，现在应该把 display: flex 当作按钮默认布局方式，而不是“备用方案”。line-height 那套逻辑，只适合极简、静态、完全可控的单行标签场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
