align-items: center在按钮中差1–2px，是因为它按子元素margin box几何中心对齐，不处理图标（如svg）与文字baseline不重合问题；svg需设display: inline-block、统一line-height与图标尺寸，并用align-self: center微调。
align-items: center 为什么在按钮里总差1–2px
不是属性写错了，是它对齐的是容器交叉轴的几何中心线，不是文字基线，更不处理图标（尤其是 <svg></svg> 或字体图标）的 baseline 偏移。图标默认是 inline 元素，渲染盒的基线和文字天然不重合；小字号（12–14px）或中文字体下，这个偏差肉眼明显。
常见诱因包括：
-
<svg></svg>没加display: inline-block或display: block，仍走 baseline 对齐逻辑 - 文字容器（如
<span></span>）继承了过大的line-height，撑高内容区 - 图标用
font-size: 1.5rem放大，但没同步调line-height或vertical-align - 父容器没设
min-height或明确高度，align-items失去参考基准
vertical-align 数值微调该用 em 还是 px
优先用 em，比如 vertical-align: -0.125em。它相对于当前字号缩放，响应式安全；而 px 在高 DPI 屏、页面缩放或换字号后容易失准。
但要注意：
- 改了
font-size后，原-0.125em可能不够——基线参考系变了，得按比例调整（比如放大 1.5 倍，偏移量也倾向放大到-0.1875em） - 不同图标来源（Bootstrap Icons、Font Awesome、自绘 SVG）内置的
viewBox和 baseline 逻辑不一致，混用时数值无法复用 - 若父容器
line-height: normal且需兼容 IE11，vertical-align渲染差异极大，此时别硬调
真正起效的三步微调法（非单属性解决）
别指望一个声明搞定。要分层切断干扰源：
- 先让图标脱离 baseline：给
<svg></svg>或图标元素加display: inline-block；字体图标（如<i class="bi bi-trash"></i>）加display: inline-block或统一用display: flex容器包裹 - 再统一高度基准：父容器设
min-height: 40px（别用height: auto），文字元素设line-height: 40px或继承父级；图标用width: 16px; height: 16px;，比font-size: 16px更稳定 - 最后像素级收口：若仍有 1–2px 偏移，用
align-self: center单独调图标，或临时加margin-top: -1px；避免动全局align-items
IE11 兼容性陷阱与静默失效
IE11 不支持 gap，对 align-items 的支持也依赖前缀。只写 align-items: center，它会静默降级为 flex-start，所有子项堆左上角。
必须手动补全：
-
display: -ms-flexbox替代display: flex -
-ms-flex-align: center替代align-items: center - 避免用
gap控制间距，改用图标元素的margin-inline-end: 6px - 测试时直接看 computed 样式里的
display是否真变成-ms-flexbox，别只信源码写了前缀
最易被忽略的是图标尺寸稳定性：<svg></svg> 必须带 viewBox="0 0 16 16"，否则缩放后原点漂移，对齐就成玄学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
