Flex居中失效主因是父容器无高度、子元素未被识别为flex项目或轴向理解错误；需确保父容器有可计算交叉轴尺寸、子元素设display:block/inline-block，并同时声明justify-content和align-items。
Flex 居中失效，90% 是因为父容器没高度、子元素没“被当回事”，或者你根本没搞清 justify-content 和 align-items 管哪根轴。
父容器没高度，align-items: center 就是摆设
多行文本 + 图标在 flex 容器里不居中，第一反应不是调属性，而是看父容器有没有可计算的交叉轴尺寸。如果它 height 是 auto、0 或完全没设，align-items: center 就找不到“中”在哪。
- 移动端尤其明显：用
100vh会因 Safari 地址栏收放跳动，改用min-height: 100dvh更稳 - 临时验证方法：给父容器加
border: 1px solid red，看它是否真占位；不占，说明高度塌了 - 别依赖
line-height去“撑高”容器——它只影响行内内容，对 flex 轴心计算无效
flex-direction 切换后，justify-content 和 align-items 的作用轴就互换了
默认 flex-direction: row 时，justify-content 控水平，align-items 控垂直；一旦改成 column，角色立刻翻转。你写的 justify-content: center 可能正在拼命垂直居中，而你以为它该管水平。
- 调试快捷方式：在控制台运行
getComputedStyle(el).flexDirection，确认当前值是不是你预期的 - 第三方组件（如 Ant Design 按钮）可能内部设了
flex-direction: column，导致你写的居中声明“生效但不对路” - 保险写法：
justify-content: center; align-items: center;一起上，不管主轴方向怎么变，两个轴都覆盖
图标和文字没被当成平等的 Flex 项目
<img alt="如何修复CSS Flex布局中多行文本和图标不居中的问题？" > 默认是 inline 元素，受 vertical-align: baseline 干扰；<svg></svg> 如果没设 display: block 或 inline-block，也会卡在基线对齐逻辑里。它们没被 flex 容器“识别”为标准项目，align-items 就不会真正作用于它们。
立即学习“前端免费学习笔记（深入）”；
- 必须确保图标元素显式声明
display: block或inline-block，切断 baseline 依赖 - 多行文字要整体居中，别对
<p></p>或<span></span>单独设text-align: center——那是水平属性，对垂直无影响 - 如果图文混排且文字需换行，建议把整个图文块包进一个
<div>，再对该 <code><div> 设 <code>display: flex; align-items: center;，避免外层容器干扰gap比margin更可靠，但 IE11 不支持用
gap控制图标和文字间距，比手动调margin-right更干净——它不触发外边距合并，也不污染子元素样式。但如果你还得兼容 IE11，就得降级。- 现代写法：
gap: 0.5rem，语义清晰，响应友好 - IE11 兼容写法：
margin-inline-end: 6px（注意不是margin-right，避免 RTL 问题） - 别给
<img alt="如何修复CSS Flex布局中多行文本和图标不居中的问题？" >或<svg></svg>设font-size——它只对字体图标生效，对图片无效，还可能引发意外缩放
真正卡住人的，从来不是写错一行 CSS，而是忘了 flex 居中需要“容器有凭据、子项有身份、轴向有定义”。哪怕只是加一行
min-height: 48px，也比反复调transform或猜line-height靠谱得多。 - 现代写法：
