line-height 不能实现多行文本垂直居中，因其仅控制行框高度与基线间距，不参与块级容器整体定位；多行时各行框堆叠、顶部对齐，导致文本整体偏上或溢出；可靠方案是 Flexbox（display: flex + align-items: center）、Grid（display: grid + place-items: center）或绝对定位+transform。
line-height 本身不能真正实现多行文本的垂直居中，它只是让单行文本在行框内居中——当文本换行时，line-height 控制的是每行基线之间的距离，不是整个块容器的居中。直接设 line-height 等于容器高度，只对单行有效；多行会撑高容器或溢出。
为什么 line-height 在多行场景下失效
浏览器渲染时，line-height 决定的是「行盒（line box）」的高度，而非内容块的整体定位。多行文本会生成多个行盒，它们按基线堆叠，顶部对齐到容器顶部，底部自然下垂——此时无论怎么调 line-height，都无法把整个文本块“托”到容器中央。
常见错误现象：
- 容器设了 height: 100px 和 line-height: 100px，但两行文字严重溢出
- 文字看起来“偏上”，尤其在字体不同时，上下留白不对称
- Flex 或 Grid 布局里还硬套 line-height，反而干扰主轴对齐
真正可靠的多行文本垂直居中方案
用现代布局方式替代 line-height 的“伪居中”。优先级按兼容性与语义合理性排序：
-
Flexbox（推荐）：给容器加
display: flex+align-items: center，文本自动居中，无论几行、字体大小如何变化都生效 -
Grid（简洁）：
display: grid+place-items: center，一行代码搞定，但 IE 不支持 -
绝对定位 + transform（兼容旧版）：容器设
position: relative，文本元素设position: absolute; top: 50%; transform: translateY(-50%)；注意需指定宽度或white-space: normal防止换行异常
什么时候还能用 line-height？
仅限以下明确场景，且必须满足全部条件：
立即学习“前端免费学习笔记（深入）”；
- 容器高度固定、不可变（如按钮、标签 badge）
- 文本确定为单行（配合
white-space: nowrap和overflow: hidden） - 字体家族和字号稳定，无动态加载或用户缩放干扰
例如：.btn { height: 32px; line-height: 32px; } —— 这是安全的；但 .card-title { line-height: 80px; } 用于两行标题，必然出错。
真正容易被忽略的点：垂直居中效果是否随字体度量（ascent/descent）变化而偏移？line-height 不感知字体实际渲染高度，而 Flex/Grid 是基于内容盒计算的——后者才是可靠基准。
