line-height等于容器高度不总能居中，因其仅作用于内联内容并受字体em-box、基线对齐、换行/空格/vertical-align等影响；多行、含inline元素、flex/grid父容器、box-sizing计算错误时均会失效。
line-height 等于容器高度为什么有时不居中？
因为 line-height 只对**内联内容**（如文字、inline 元素）起作用，且依赖字体的 **em-box** 和浏览器默认的基线对齐逻辑。当容器里有换行、空格、或设置了 vertical-align 的子元素时，视觉上就可能“偏上”或“压底”。
常见错误现象：div 高度 40px，设了 line-height: 40px，但中文文字看起来还是略偏下；或者加了 padding 或边框后完全错位。
- 确保容器是单行纯文本，无
br、无span嵌套、无额外空白字符 - 避免给容器设
font-size: 0或letter-spacing，它们会干扰行高计算 - 如果用了自定义字体，注意其
ascent/descent值可能拉高 em-box，导致文字实际位置比预期低
哪些场景下 line-height 居中会失效？
单行文本垂直居中靠 line-height 是快捷方案，但一碰到以下情况就不可靠：
- 多行文本：
line-height控制的是行间距，不是整体块居中 - 容器含图标、
img或其他inline元素：它们默认按基线（baseline）对齐，会拖动整行位置 - 使用了
flex或grid布局的父容器：此时line-height完全不起作用 - 设置了
box-sizing: border-box但忘了把border或padding从高度里扣除，导致内容区实际高度 ≠line-height
替代方案：什么时候该换 flex？
只要容器不是严格单行、或你无法控制子元素类型，直接用 display: flex 更稳。
实操建议：
- 给容器加
display: flex+align-items: center，无需关心字体度量 - 若需兼容 IE10+，避免用
flex-direction: column配justify-content: center（IE 对 column 的 justify 支持弱） - 注意
flex会让子元素变成flex-item，vertical-align失效，text-align仍有效
示例：
.container { display: flex; align-items: center; height: 40px; }
font-size 和 line-height 的数值关系怎么调？
即使 line-height: 40px 设对了，如果 font-size 过大（比如 24px），文字本身高度可能接近甚至超过 40px，导致溢出或截断——这时不是没居中，而是根本“装不下”。
- 中文常用字号在 12–16px，对应
line-height推荐设为字号的 1.2–1.5 倍；设绝对值时，建议留 4–8px 余量 - 用相对单位更安全：
line-height: 2.5（无单位）比line-height: 40px更适应缩放和响应式 - Chrome 开发者工具里勾选“Show layout shifts”，能直观看到文字 em-box 和 content area 的实际重叠范围
字体度量细节、多语言混排、以及 font-feature-settings 对基线的影响，这些点一旦掺进来，line-height 就不再是“设个数就完事”的事了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
