line-height 垂直居中需满足行内级单行文本、无干扰元素等条件；常见问题源于 padding/border、混排元素或字体差异，可改用 flex、table-cell 或绝对定位等更可靠方案。
文字设了 line-height 等于容器高度，却没垂直居中？不是 line-height 失效，而是你忽略了它真正起作用的条件和干扰因素。
line-height 垂直居中的本质逻辑
line-height 并不是“把文字往上推”，而是定义了一行文本的**总高度**，它由三部分组成：上间距 + 字体内容高度 + 下间距。浏览器默认让这三者对称分布，即上下间距相等，所以文字自然落在这一行的正中间。
关键前提是：该元素必须是行内级（inline 或 inline-block）上下文中的单行文本，且没有其他影响行框高度的因素干扰。
- 若父容器用了
box-sizing: border-box，而你又设置了padding或border，那实际内容区高度 = height − padding − border，此时line-height应等于这个「净高」才有效 - 如果容器里混入了图片、
vertical-align非 baseline 的行内元素，整个行框会被拉高，文字就“看起来偏下” -
font-family不同，字母 X 高度（ex）、基线位置不同，也会影响视觉居中感，尤其小字号时更明显
常见不居中的原因与对应解法
多数“不居中”其实是被隐藏细节破坏了理想行框结构：
立即学习“前端免费学习笔记（深入）”；
- 有 padding/border 却没调整 line-height：用
calc(height - padding-top - padding-bottom - border-top-width - border-bottom-width)计算真实内容高度，再设为 line-height - 父容器 font-size 过大或含空格/换行符：空格也会生成行内盒，撑高行框；建议给父容器设
font-size: 0，子元素再单独设字体大小 - 图片或图标混排导致基线错位：给图片加
vertical-align: middle或bottom，或统一用display: block+margin: auto - 需要兼容旧版 IE 或内容动态变化：避免依赖 line-height，改用
display: table-cell; vertical-align: middle更稳妥
更可靠的替代方案（不依赖 line-height）
当 line-height 行不通或需支持多行、响应式场景时，这些方法更可控：
- Flex 布局（推荐现代项目）：父容器设
display: flex; align-items: center; justify-content: center - 伪元素 + vertical-align：在容器内插入一个
::after伪元素，display: inline-block; height: 100%; vertical-align: middle，再让文字也设vertical-align: middle - 绝对定位 + transform：适用于已知宽高的固定容器，
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - scale 缩放技巧（适合图标类小文本）：先放大尺寸和 line-height，再用
transform: scale(0.5)缩回，规避像素对齐误差
调试建议：一眼看出问题在哪
遇到不居中，别急着改代码，先打开开发者工具检查这几项：
- 选中文字元素 → 查看 Computed 面板里的
line-height实际值是否如你所设 - 看 Layout 面板，确认元素的
content area高度是否等于你预期的“净高” - 把父容器背景设成浅色，文字设深色，同时开启「显示网格线」或「渲染层叠边界」，观察文字是否真在内容区中央
- 临时移除所有子节点，只留纯文本，看是否恢复居中——能说明是其他元素干扰了行框