line-height本质是控制行框高度，而非容器垂直对齐；它仅作用于每行内联内容，决定行框（line box）高度，多行时各行独立堆叠，无法实现整体居中。
line-height 本质是控制行框高度，不是文本块位置
line-height 的作用对象是每一行内联内容（比如文字、span），它决定的是「行框（line box）」的高度，而不是整个段落或容器的垂直对齐方式。设 line-height: 60px，只是让每行都拉高到 60px，多行时它们依然从顶部开始堆叠——结果是文字挤在顶部，底部大片留白，看起来完全不居中。
多行文本无法用 line-height 居中的真实原因
这不是数值没调准，而是机制冲突：
-
line-height不参与块级布局计算，对div、p这类块容器本身无垂直定位能力 - 当文本换行，浏览器会生成多个行框，每个独立受
line-height影响，但彼此之间没有“整体居中”逻辑 - 如果容器用了
display: flex或display: grid，line-height对子元素的垂直对齐直接被忽略（DevTools 里显示为not applicable） - 哪怕你手动算出总高度（比如 3 行 × 24px = 72px），也无法保证行间距均匀分布——因为首行顶部、末行底部还受
font-size、ascent/descent和基线影响
为什么 align-items: center 是更可靠的选择
它绕开了字体度量和行框干扰，直接按容器交叉轴做几何居中：
- 必须给父容器设明确高度（
height或min-height），否则没有参照基准 - 文本元素（如
p或div）要是flex容器的直接子元素，避免嵌套干扰 - 记得清除默认
margin：p { margin: 0; }，否则上下边距会破坏视觉居中 - 别在 flex 容器里再写
line-height，二者混用可能引发 Safari 下 1px 偏移或文字跳动
最容易被忽略的兼容性细节
真机调试时最常栽在这几个点上：
- iOS Safari 会给
button注入隐式vertical-align: baseline，得显式覆盖为vertical-align: middle - 自定义字体（如 Inter、SF Pro）的
ascent值比系统字体高，相同line-height下文字视觉位置更高 - 响应式中
font-size用clamp()或vw动态变化时，line-height很难同步缩放，而align-items: center完全不受影响 - 服务端渲染或 CMS 输出的文案可能带不可见空格或换行符，
white-space: nowrap在 flex 场景下反而会截断文字，不如直接信任 flex 的弹性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
