align-items: center失效主因是它对齐交叉轴中心线而非文字基线，且图标（如SVG、字体图标）作为inline元素受baseline影响；需设display: block、统一line-height、避免gap并兼容IE11。
align-items: center 看起来能居中，但实际常失效——不是写错了，而是它对齐的是容器交叉轴中心线，不是文字基线，更不负责协调图标渲染盒的上下偏移。
为什么 align-items: center 在按钮里总“差一点”
图标（尤其是 <svg></svg> 或字体图标）默认是 inline 元素，受浏览器字体度量影响：它的“内容边界”和文字的 baseline 不重合；align-items: center 又不管 baseline，只按整个子元素的盒模型几何中心算。结果就是图标视觉上浮高、文字显下沉，尤其在小字号（12–14px）或非等宽字体下更明显。
- 图片或 SVG 没设
display: block，仍走 inline 基线对齐逻辑 - 文字容器（如
<span></span>）有继承的line-height，撑高了内容区高度 - 图标用了
font-size放大，但未同步调line-height或vertical-align - 父容器有
padding或子元素有margin，干扰了 flex 项的实际占位
真正起效的三步微调法
别指望单靠 align-items: center 一招解决。要分层控制：先切断基线干扰，再统一高度基准，最后像素级收口。
- 给图标加
display: block或display: inline-block（SVG 必须显式声明） - 按钮容器设
align-items: center，同时确保文字容器（如<span></span>）的line-height和图标高度一致（例如都用16px） - 若仍有 1–2px 偏移，优先用
align-self: center或margin-top: -1px单独调图标，而非改全局align-items
IE11 和旧 Edge 下的兼容性陷阱
IE11 完全不认 gap，对 align-items 的支持也依赖前缀。光写 align-items: center，在 IE11 里会静默降级为 flex-start，导致全部左上角堆叠。
立即学习“前端免费学习笔记（深入）”；
- 必须手动补
-ms-flex-align: center和display: -ms-flexbox - 避免用
gap控制图标间距，改用图标元素的margin-inline-end: 6px - 测试时直接看 computed 样式里的
display是否真变成-ms-flexbox，别只信源码写了前缀
最易被忽略的是：图标尺寸是否真的稳定。用 width: 16px; height: 16px; 比 font-size: 16px 更可控；SVG 必须带 viewBox="0 0 16 16"，否则缩放后原点漂移，对齐就成玄学。
