line-height = height 仅在严格条件下有效，常见失效原因包括容器高度未固定、内容换行、盒模型干扰、flex布局覆盖及单位选择不当。
line-height = height 失效的典型场景
这个技巧只在极窄条件下有效，一旦环境稍有变化就立刻翻车。最常见失效点不是代码写错，而是前提条件被悄悄破坏。
- 容器
height是auto、min-height或百分比（如height: 100%）且父级没定高 → 行框高度无法锚定 - 内容实际换行了：哪怕模板里多一个空格、回车，或响应式下文字变宽触发折行，
line-height就只管第一行，其余行堆叠溢出 - 容器写了
padding或border，但line-height还按总高设（比如height: 40px; padding: 6px;时，内容区只剩 28px，该设line-height: 28px） - 父级用了
font-size: 0（常用于清除 inline-block 间隙），导致子元素行框塌缩为 0
为什么 flex 布局下 line-height 不起作用
display: flex 容器会忽略 line-height 的垂直对齐逻辑，因为 align-items 直接接管了主轴对齐行为。这不是 bug，是规范明确的优先级覆盖。
- 即使你写了
line-height: 50px，只要容器是display: flex，它对子元素的垂直位置完全无影响 - 若子元素是
inline或inline-block，line-height仍控制其内部行框，但整个子元素的定位由align-items决定 - 想混用？别试。要么全用 flex，要么清掉
display: flex再用line-height
line-height 单位选错导致响应式失效
用像素值（如 line-height: 40px）看似稳妥，实则埋雷：字体缩放、系统字号调整、rem 切换时，行高卡死不动，文字立刻挤在一起或重叠。
- 正确做法是用无单位数值：
line-height: 1.6—— 浏览器自动乘以当前font-size计算真实高度 - 百分比（如
line-height: 160%）语义等价，但继承链中若父级font-size变化，计算更难追踪，不推荐 -
line-height: normal不可靠：不同字体的默认 ascent/descent 差异大，思源黑体和 Courier New 在同样font-size下行高能差 20%
单行居中时容易被忽略的盒模型细节
按钮、标签这类内联元素自带 padding 和 border，直接设 height 和 line-height 往往不对齐，因为 height 是总高，而 line-height 要匹配内容区。
- Chrome 默认
button上下padding各 6px，若设height: 40px，内容区只有 28px，line-height必须是28px - 更稳的做法是重置盒模型：
box-sizing: border-box+ 显式清掉padding和border，再设height和line-height - 加
white-space: nowrap不只是防换行，还能避免某些浏览器把末尾空格当换行符处理
line-height 方案就得立刻放弃——它不是“不好用”，而是根本不在适用域内。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
