优先用 display: flex + align-items: center；若必须用 vertical-align，则弃用 middle，改用 -0.125em 或 text-bottom，因其对齐的是行盒中线而非视觉中心，受字体、字号、SVG viewBox 等影响易偏差 1–2px。
直接结论：优先用 display: flex + align-items: center，别硬调 vertical-align；如果必须用 vertical-align，就别写 middle，改用 -0.125em 或 text-bottom。
为什么 vertical-align: middle 总是不准
它对齐的不是视觉中心，而是父元素行盒中线（约在 x-height 的 0.5ex 处），而图标（尤其是 SVG 或字体图标）的 baseline 位置受 font-family、字号、viewBox 甚至 CDN 实现影响，同一段 CSS 在 Chrome 和 Safari 里可能差 1–2px。更糟的是：vertical-align 对 div 这类 display: block 元素完全无效——你写了也白写。
常见错误现象：
- 图标看起来“浮高”，文字显下沉，尤其在
font-size: 12px或使用中文 Web Font 时 - 同一行多个图标，有的对齐、有的偏移——因为它们来自不同图标库（Bootstrap Icons vs Font Awesome），baseline 内置逻辑不一致
- 页面缩放后对齐突然崩坏，因
px偏移值在高 DPI 屏下失准
用 display: flex + align-items: center 的实操要点
这招真正起效的前提不是“写了就行”，而是容器结构和子元素行为都得配合：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须是图标的直接父级，且只含图标和文字（或最多一个分隔符），不能是包裹整段按钮/菜单的大容器
- 图标本身得脱离 inline baseline 干扰：SVG 必须加
display: block或display: inline-block；<i>标签若用字体图标，也要显式声明display: inline-block - 避免混用
gap和margin：IE11 不支持gap，若需兼容，改用margin-inline-end: 6px - 固定高度容器建议同步设
line-height: inherit给文字元素，防止文字因继承默认line-height: normal而撑高
非 flex 场景下怎么调 vertical-align
当父容器是 display: inline-block、或需兼容老项目无法改结构时，数值微调比猜 middle 可靠得多：
- 优先用
vertical-align: -0.125em：适配多数字体的 x-height，缩放安全，响应式友好 - 需要图标底边贴合文字底边时，用
vertical-align: text-bottom（比如按钮内小提示图标） - 若图标尺寸被
font-size放大过（如font-size: 1.5rem），原-0.125em可能不够，可临时加一层 wrapper 并设display: inline-flex; align-items: baseline - 绝对不要给
<img>或<svg>直接设font-size——它只对字体图标生效
IE11 和旧 Edge 下的隐形陷阱
光写 align-items: center 在 IE11 里会静默降级为 flex-start，图标和文字全堆左上角。必须手动补前缀：
-
display: -ms-flexbox替代display: flex -
-ms-flex-align: center替代align-items: center - 测试时直接看 computed 样式里的
display是否真变成-ms-flexbox，别只信源码写了前缀 - 避免用
gap控制间距，IE11 完全不认；改用图标自身的margin-inline-end
最容易被忽略的是图标尺寸稳定性：SVG 若没设 viewBox 或写了固定 width/height，在 flex 容器里缩放时会拉伸变形，进而破坏对齐基准——所有对齐调整都得建立在图标渲染盒稳定的基础上。
