line-height = height 不能真正实现垂直居中，仅在严格条件下（单行、无padding/border、box-sizing:border-box、无图标、非flex容器等）视觉巧合居中；多行、含图标或动态内容时必然失效。
line-height 只能在严格限定条件下让单行文字“看起来”垂直居中，它不是真正的居中机制，而是行框撑满后的视觉巧合。多行、动态内容或含图标时直接失效。
line-height = height 为什么有时不居中
这不是代码写错了，是渲染逻辑被干扰了：
-
white-space: nowrap没加——哪怕模板里有个换行符或长单词，都会触发多行，line-height就变成拉高每行间距，文字堆顶 - 容器有
padding或border，但没设box-sizing: border-box→ 实际内容区高度 height，line-height对不上真实可用空间 - 父级设置了
font-size: 0或vertical-align: top，导致子元素行框基线计算异常 - 用了自定义字体（如 Inter、SF Pro），其 ascent/descent 度量值偏大，文字视觉重心上移，即使数值相等也“偏上”
什么时候能放心用 line-height 做垂直居中
必须同时满足以下全部条件：
- 容器
height是固定像素值（不能是min-height、百分比或auto） - 内容确定为单行：显式声明
white-space: nowrap+overflow: hidden - 容器内只有纯文本，不含
img、svg、图标字体或inline-block元素 - 字体家族和
font-size稳定，无运行时切换或用户缩放干预 - 布局模式是
display: block或display: inline-block，没混用flex或grid
典型安全场景：.btn { height: 36px; line-height: 36px; white-space: nowrap; }
立即学习“前端免费学习笔记（深入）”；
line-height 的取值方式直接影响可靠性
用错单位会导致继承混乱或计算偏差：
-
line-height: 36px：写死高度，子元素字号变大时行高不变，易挤字或截断 -
line-height: 1.5（无单位数字）：✅ 推荐。实际值 = 当前font-size× 1.5，继承时自动适配，抗干扰强 -
line-height: 150%或line-height: 1.5em：⚠️ 不推荐。继承时传的是计算后的 px 值，子元素font-size一变，行高就卡死不动
多行或不确定内容时，别硬改 line-height
line-height 控制的是每行的行框高度，不是整个文本块在容器中的位置。两行文字设 line-height: 100px，结果是两行各高 100px、顶部对齐，底部大片留白——这不是居中，是误判。
真正可靠的方案只有三个：
-
display: flex+align-items: center（推荐，语义清、兼容好、支持混合内容） -
display: grid+place-items: center（简洁，但 IE 不支持） - 绝对定位：
position: absolute; top: 50%; transform: translateY(-50%)（需确保父容器position: relative，且文本元素宽度可控）
最容易被忽略的点：字体度量（ascent/descent）会影响实际渲染重心，line-height 完全不感知这个，而 flex 和 grid 是基于内容盒边界计算的——后者才是稳定基准。
