line-height 等于 height 能垂直居中单行文字，是因为行框高度被撑满，文字在其中默认按基线居中；但仅适用于无换行、无其他 inline 元素、字体一致且 height 为内容区高度的纯文本场景。
line-height 等于 height 为什么能垂直居中单行文字
因为 line-height 控制的是行框（inline box）的总高度，当它和容器的 height 相等，且文字是单行、无换行、无其他 inline 元素干扰时，浏览器会把文字的基线（baseline）上下留出相等空间，视觉上就落在正中间。
这不是“居中对齐”，而是行高撑满后自然产生的视觉效果。本质是文字在行框里被默认垂直居中了——但仅限于单行文本。
- 只适用于纯文本或内联元素，
div里塞了span或图标就可能偏移 - 字体差异会影响实际位置：不同字体的 ascent/descent 不同，
line-height是从行框顶部到底部的距离，不是从文字顶部开始算 - 如果容器有
padding或border，要确保height是内容区高度，否则整体尺寸会超
line-height = height 失效的常见场景
看似设了相同值，文字却没居中？大概率掉进了这几个坑：
-
height被继承或重置：父级用了font-size: 0或vertical-align影响了行框计算 - 文字换行了：哪怕只是空格或长单词没加
white-space: nowrap，就会变成多行，line-height失去控制力 - 容器是
display: flex或table-cell：这些 display 类型有自己的对齐逻辑，会覆盖line-height的行为 - 用了
box-sizing: border-box但height没扣掉border和padding，导致实际内容区变小，行框溢出
替代方案对比：什么时候不该用 line-height
一旦需求超出“单行纯文本”，硬套 line-height = height 就是给自己埋雷。
立即学习“前端免费学习笔记（深入）”；
- 多行文字：改用
display: flex; align-items: center，兼容性好（IE10+），语义清晰 - 需要响应式字号：
line-height是数值单位（如2）才随字体缩放，写成px就会失联 - 配合图标或按钮：混合 inline 元素时，
vertical-align: middle更可控，但要注意默认 baseline 对齐带来的错位 - 字体加载期间：系统字体和 web font 渲染高度不同，可能导致闪动，flex 方案更稳定
实操检查清单
下次想用 line-height 居中前，快速扫一遍：
- 确认容器
white-space: nowrap且无隐藏换行符（比如模板字符串里的回车） - 检查 computed styles，看最终生效的
line-height和height是否真的一致（注意单位，em和px别混） - 用 devtools 选中文字，看它的
offsetTop是否 ≈ (容器高度 − 文字高度) / 2 - 在 Safari 和 Chrome 里都测一下——老版本 Safari 对
line-height在inline-block容器里的解析略有差异
真正麻烦的从来不是怎么写，而是为什么写了却没效果。盯着 computed 值看两眼，比查十篇教程更快定位问题。
