line-height等于height仅对单行纯文本可靠，因它依赖行框撑满与基线对齐；一旦换行、含图标、字体差异或盒模型未设border-box即失效，此时应改用flex布局。
line-height 等于容器 height 是最直接有效的做法，但必须满足三个硬性条件：容器高度固定、内容为单行、子元素是行内级（如纯文本或 span）。
为什么 line-height + text-align 能用，但常失效
它不是“居中”，而是靠拉伸行框高度把文字“顶”到视觉中心。失效常见于：
- 容器
height和line-height数值或单位不一致（比如一个是60px，一个是60rem） - 容器有上下
padding，但height没减去它，导致内容区实际高度变小 - 文字因宽度不足自动换行，
line-height只作用于每行，多行就堆叠偏移 - 子元素是
div或设了display: block的span，此时line-height不生效
怎么写才真正起作用
关键在容器样式，不需要额外包裹或 JS：
- 容器必须设明确的
height（不能是auto或百分比且祖先无高） -
line-height值必须和height完全相等（包括单位），例如都用48px - 加
text-align: center控制水平居中——它只对内部行内内容起效 - 避免给文字加
vertical-align，否则可能干扰基线对齐
示例：
.title { height: 48px; line-height: 48px; text-align: center; }
立即学习“前端免费学习笔记（深入）”；
哪些场景下别硬套这个方案
一旦出现以下任一情况，line-height 就不可靠，应立刻切到 flex：
- 文字可能换行（比如响应式断点下宽度收缩）
- 容器高度由内容撑开或设为
min-height - 要居中的不只是纯文本，还混有
img或icon - 字体动态加载、字号随系统缩放变化（
line-height不会自适应）
真正容易被忽略的是：哪怕只有一处 white-space: nowrap 没加稳，或者父容器用了 box-sizing: border-box 却忘了把 padding 算进 height，line-height 就会差 2–3px 偏移——这种偏差在高清屏上特别明显，但调试时又很难定位。
