vertical-align: middle 并非垂直居中正解，它对齐的是行盒内的 x-height 中线，受 font-size、line-height、字体基线及 SVG viewBox 影响，易跨浏览器失准；应优先用 inline-flex + align-items: center 替代。
vertical-align: middle 不是万能解，它常失效且调不准——这不是你代码写错了，而是它本就不该干这个活。
为什么 vertical-align: middle 总是差一点
它对齐的不是“视觉中心”，而是父元素行盒中一条叫“x-height 中线”的抽象线，这条线高度由 line-height、当前字体的 ascender/descender、甚至图标自身内联样式（比如 Bootstrap Icons 默认带 vertical-align: -0.125em）共同决定。中文文字基线比英文字母低，SVG 图标 viewBox 原点位置不统一，结果就是：同一段 CSS，在 Chrome 里刚好看齐，到 Safari 里就下沉 2px；换了个 font-size: 1.2rem，原来调好的 -0.125em 突然又偏了。
用数值微调 vertical-align 的实操要点
如果必须用 vertical-align（比如老项目不能改结构），请按以下方式操作：
- 优先用
em单位，例如vertical-align: -0.125em或0.25em—— 它随字号缩放，响应式安全；px在高 DPI 屏或用户缩放页面时会失准 - 调完
font-size后发现又不对齐？不是值错了，是参考系变了 —— 原-0.125em可能得改成-0.15em，建议把偏移抽成 CSS 变量：--icon-align: -0.125em，改字号时一并更新 - 别在一行里混用不同
font-size的图标（比如一个1rem，一个1.5rem），这时再调数值纯属徒劳 - DevTools 里用“拖拽像素”功能微调最直观，调稳后再固化为
em值，别凭感觉写-3px
什么时候该直接放弃 vertical-align
遇到以下任一情况，请立刻切到 display: inline-flex 方案，硬调就是在浪费时间：
立即学习“前端免费学习笔记（深入）”；
- 图标来自多个来源（Bootstrap Icons + Font Awesome + 自绘 SVG），它们的内置 baseline 逻辑不一致
- 文字用了 Web Font，加载未完成时 fallback 字体导致基线跳变
- 需要支持 IE11 且父容器设了
line-height: normal（IE 渲染差异极大） - 同一行有两行以上文字，
vertical-align对多行文本完全失效
更可靠的做法：用 inline-flex 替代 vertical-align
把图标和文字包进一个 span，设 display: inline-flex; align-items: center; —— 这个方案不依赖字体度量，不受 line-height 干扰，多行也稳，且兼容性已覆盖所有现代浏览器（包括 Edge 16+ 和 Safari 10.1+）：
span.icon-wrapper {
display: inline-flex;
align-items: center;
gap: 4px; /* 可选间距 */
}
.icon-wrapper svg,
.icon-wrapper img {
flex-shrink: 0;
width: 1em;
height: 1em;
}注意：不要给 svg 或 img 再设 vertical-align，它在 flex 容器里已无效；flex-shrink: 0 防止图标被压缩变形。
真正难的不是怎么调，而是判断什么时候该停手——vertical-align 是行内布局的补丁，不是垂直居中的正解。一旦发现要反复试值、跨浏览器不一致、或改个字号就得重调，说明你已经踩进基线陷阱了。
