align-items: center 失效主因有三：一是 inline 元素 baseline 偏移（如 SVG 需设 display: inline-block），二是父容器无明确高度（需 min-height），三是子元素非直接同级（需避免嵌套或用 display: contents）。
align-items: center 能让图标和文字在 Flex 容器里视觉上“看起来居中”，但实际经常失效——根本原因不是属性写错了，而是它只对齐几何中心线，不处理 inline 元素的 baseline 偏移、父容器无高度、或子元素嵌套层级干扰。
为什么 align-items: center 在按钮里总差 1–2px？
图标（尤其是 或字体图标）默认是 inline 元素，其渲染盒的基线（baseline）和文字不重合；align-items: center 只按整个子元素的 margin box 几何中心算，不管字体度量。结果就是：SVG 视觉上浮高，文字显下沉，尤其在小字号（12–14px）下更明显。
-
必须显式加display: inline-block或display: block，否则仍走 baseline 对齐逻辑 - 文字容器（如
）的line-height要和图标高度匹配（例如都基于 16px 高度），别用line-height: 2这类无单位值 - 图标尺寸优先用
width: 16px; height: 16px;，比font-size: 16px更稳定；SVG 必须带viewBox="0 0 16 16" - 若仍有偏移，用
align-self: center单独调图标，或临时加margin-top: -1px，别改全局align-items
父容器没高度，align-items: center 就是摆设
Flex 的垂直居中依赖交叉轴（Y 轴）有可测量空间。如果父容器高度由内容撑开（height: auto 或完全不设），align-items 就无从下手——子元素会紧贴顶部，像没生效一样。
- 必须给父容器设
height或min-height（推荐后者，如min-height: 48px） - 避免用
height: 100%除非所有祖先都有明确高度，否则会连锁失效 - 需要等比宽高时，可用
aspect-ratio: 1 / 1配合min-height，比 JS 计算更轻量
子元素不是同级，align-items 就对不上人
把
再丢进 Flex 容器，等于只让
成为一个 flex item，而图片被锁死在段落流内——这时 align-items: center 只作用于 这个块，不是图片本身。
- 确保图标（
、）和文字（、）是父容器的直接子元素 - 删掉中间层：不要
- 如果必须语义化包裹（如用
display: contents让 wrapper 不参与布局（注意 Safari 15.4+ 才完全支持）
IE11 下 align-items: center 静默失效
IE11 完全不认 gap，对 align-items 的支持也依赖前缀。光写 align-items: center，在 IE11 里会静默降级为 flex-start，全部堆左上角。
- 必须补
display: -ms-flexbox和-ms-flex-align: center - 避免用
gap控制图标间距，改用margin-inline-end: 6px - 测试时直接看 computed 样式里的
display是否真变成-ms-flexbox，别只信源码写了前缀
真正难的不是写对那行 CSS，而是判断当前失效到底是 baseline 偏移、父容器塌陷、还是子元素层级藏得太深——先打开开发者工具，盯着 computed 样式里 display、height、align-items 这三项，比反复改代码更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
