align-items: center没生效的根本原因是父容器在交叉轴（默认Y轴）上无可测量高度，必须设置min-height或height（如min-height: 48px），且子元素须为直接子项并脱离inline干扰。
align-items: center 为什么没生效
根本原因不是属性写错了，而是父容器在交叉轴（默认 Y 轴）上没有可测量的高度。Flex 的 align-items: center 是把子项对齐到容器的“中心线”，如果容器高度由内容撑开，这条线就紧贴顶部，视觉上就像没居中。
- 必须给父容器设
min-height（推荐）或height，比如min-height: 48px（按钮常用） - 避免用
height: auto或完全不设高度 - 若需等比宽高，可用
aspect-ratio: 1 / 1配合min-height
图标必须是直接子元素且脱离 inline 干扰
把 <img> 塞进 <p> 或 <span> 再丢进 flex 容器，等于只让那个包裹标签成为 flex item——align-items 对里面的图标完全不起作用。
- 结构必须扁平：
<div class="icon-text"><img><span>文字</span></div> -
<img>默认是 inline 元素，会参与行内基线计算，干扰对齐；加display: block或display: inline-block让它退出 inline 流 - 字体图标（如
<i class="icon-phone"></i>）同样要显式设display: inline-block
多行文字下图标看起来“偏高”怎么办
人眼觉得不对齐，往往是因为多行文字的视觉重心低于几何中心线，而 align-items: center 对齐的是后者。这不是 bug，是渲染逻辑和感知偏差的叠加。
- 不要只调容器，改用
align-self: center单独作用于文字元素（如span），覆盖容器级对齐 - 更稳妥的做法：把图文整体包进一个
<div>，再对该 div 设display: flex; justify-content: center; align-items: center - 若文字需换行且保持语义，可用
flex-direction: column; justify-content: center把图文当垂直单元处理
gap 和 line-height 得配合着调
即使 flex 居中了，图标和文字之间还可能有奇怪间距或底部空白，根源常在 line-height 和 inline 元素残留行为。
立即学习“前端免费学习笔记（深入）”；
- 文字元素（如
span）设line-height: 1或与图标高度一致（如line-height: 1.2em），避免继承默认normal - 用
gap控制图文间距，比margin-right更稳定；IE11 不支持gap，则改用margin-inline-end: 6px - 别给
<img>或<svg>设font-size——它只对字体图标生效
