Flex容器中设line-height会偏移，因其在Flex上下文中不控制垂直对齐，仅撑大子元素内部行盒，干扰align-items: center的几何中心计算；常见于inline元素、inline-flex父容器、含img/svg的子项或未重置vertical-align等场景。
Flex容器里设line-height为什么反而偏移
因为line-height在Flex上下文中根本不起垂直对齐作用——它只影响行内内容的行框高度，而Flex子项一旦成为flex item，就脱离了传统行内流，line-height只会额外撑大其内部行盒，干扰align-items: center的几何中心计算。
哪些情况会触发line-height导致的视觉偏移
常见于混合布局或未清理默认样式的场景：
- 子元素是
<span></span>或未设display: block，仍按inline行为参与行盒构建 - 父容器用了
display: inline-flex，首个子元素font-size变化会拖动整容器基线（尤其动画中） - 子元素含
<img alt="为什么CSS Flex子元素设置line-height垂直居中会产生偏移" >、<svg></svg>等inline元素，默认vertical-align: baseline把整行拉高 - 写了
line-height: 2但子元素font-size是0或极小值（如0.1rem），浏览器仍保留基线空间
DevTools里怎么快速定位是不是line-height惹的祸
打开Computed面板，依次检查：
- 确认父容器
display确实是flex或inline-flex - 看子元素的
line-height是否被继承并生效（注意computed值是否为normal或具体数值） - 对比
height和line-height的差值：若line-height远大于内容高度，且子元素有margin或padding，大概率是它在撑开行盒 - 临时删掉子元素所有
line-height声明，观察位置是否回归稳定
真正该做的不是调line-height，而是关掉它
Flex垂直居中靠的是几何中心对齐，不是行盒对齐。稳妥做法是显式切断干扰：
立即学习“前端免费学习笔记（深入）”；
- 给子元素加
line-height: normal或line-height: 1（避免继承父级大值） - 确保子元素是块级：
display: block或display: flex（别留span裸奔） - 重置可能影响基线的属性：
vertical-align: top（对inline-flex父容器尤其关键） - 如果子元素含图标+文字，统一用
display: flex包裹再居中，不依赖任何line-height
最常被忽略的一点：即使你没写line-height，浏览器默认line-height: normal仍会根据字体度量生成行盒——在inline-flex容器里，这个“正常”就是偏移源。
