父容器未设高度时align-items:center无效，因缺乏交叉轴参考空间；需加min-height（如48px）、确保图文同级、重置img为block并清除line-height干扰。
父容器没设高度，align-items: center 就是摆设
很多人写了 display: flex 和 align-items: center，但图标还是贴顶或悬空——根本不是属性写错，而是父容器在交叉轴（Y 轴）上没可测量的高度。Flex 垂直居中必须有参考空间，如果高度由内容撑开，align-items 就无从下手。
- 给父容器加
min-height: 48px（推荐），比固定height更适应响应式场景 - 避免用
height: auto或完全不设高度；若需等比，可用aspect-ratio: 1 / 1配合min-height - 临时验证：加
border: 1px solid red看容器是否真包住了子元素
图文必须同级，别塞进 p 或 span 里
把 <img> 套在 <p></p> 里再丢进 flex 容器，等于只让 p 成为一个 flex item，图片被锁死在段落流内——align-items 只作用于 p 这个块，不是图片本身。
- 正确结构：
<div class="icon-text"> <img><span>设置</span> </div>，img和文字标签是直接子元素 - 删掉中间层：
<div><img></div>文字这类包装会破坏层级 - 必须语义化包裹时，用
display: contents让 wrapper 不参与布局（注意 IE 不支持）
图片默认 inline，vertical-align 和 line-height 会偷偷捣乱
即使启用了 flex，img 默认仍是 inline 元素，若祖先节点残留 line-height 或 vertical-align: baseline，仍会在底部留白或偏移——这不是 align-items 失效，而是渲染层叠加干扰。
- 显式重置：
img { display: block; }（推荐）或img { vertical-align: top; }（仅调试用） -
img, span { margin: 0; line-height: 1; }清除继承干扰 - 避免给文字元素设
line-height > 1.2，尤其容器高度较小时
多行文字+图标时，align-items: center 不够准
人眼觉得“图标偏高”，是因为多行文本的视觉重心略低于几何中心。align-items: center 会让图标对齐到整个文字块的中心线，而非感知中心。
- 换思路：
flex-direction: column; justify-content: center;，把图标和文字整体当一个垂直堆叠单元处理 - 若仍需横排，可给文字加
align-self: center强制单独对齐（但需测试不同字号下的稳定性） - 不要依赖
column布局实现水平居中——它只在特定条件下生效，不可靠
真正卡住人的地方，往往不是 display: flex 没写，而是父容器高度没约束、图文层级被无意嵌套、或者 line-height 从 body 继承下来悄悄捣乱。这些细节不显眼，但改一行就见效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
