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