Flex容器中图标文字对齐不居中，需同时设置align-items: center和justify-content: center；图标偏上因inline基线对齐，应确保其在flex上下文中；IE11需-ms-flex-align: center/middle和-ms-flex-pack: center；多行文字居中需flex-direction: column加text-align: center。
flex容器里图标文字对齐不居中？检查align-items和justify-content是否都设了
图标加文字水平垂直居中，最常见问题是只写了display: flex，却漏掉关键的对齐声明。Flex默认是align-items: stretch（纵向拉满）和justify-content: flex-start（横向靠左），根本不会居中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
align-items: center（垂直居中）和justify-content: center（水平居中） - 如果父容器有固定高度，
align-items: center才有效；若高度由内容撑开，它依然生效，但视觉上可能“没变化”——此时要确认有没有意外的margin或line-height干扰 - 避免给子元素（比如
<i></i>图标或<span></span>文字）设vertical-align，它在flex里完全无效
图标用<i></i>或<svg></svg>时，为什么总偏上？
图标字体（如Font Awesome）或内联SVG默认是display: inline，基线对齐（baseline-aligned），文字底部和图标底部对齐，导致图标看起来“悬空”。Flex能解决，但前提是别让它们退化成inline行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保图标元素在flex容器内，且没被额外包裹一层
display: inline容器 - 不要给图标加
vertical-align: middle试图修复——它在flex上下文中无意义 - 如果图标是
<svg></svg>，注意默认vertical-align: baseline，可显式设vertical-align: top临时绕过（但推荐走flex方案） - 示例：
.icon-text { display: flex; align-items: center; justify-content: center; height: 40px; }，里面放<svg></svg>和<span>文字</span>，自然居中
IE11兼容flex居中？得用ms-flex前缀+调整align-items值
IE11支持旧版Flex语法，align-items: center会失效，必须用-ms-flex-align: center，而且它的取值和标准不同：标准写center，IE11要写center或middle（部分版本认middle更稳）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写两遍声明：
align-items: center和-ms-flex-align: center - 如果仍不居中，把
-ms-flex-align换成-ms-flex-align: middle试试 - IE11下
justify-content对应-ms-flex-pack: center，别漏掉 - 别依赖
flex: 1做等高——IE11对这个简写解析不稳定，拆成flex-grow: 1等更安全
文字换行后还要求居中？flex-direction: column + text-align: center
当文字内容可能折行（比如按钮文案较长），单纯justify-content: center只能水平居中单行，换行后每行左对齐。这时需要组合布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设
flex-direction: column，让图标和文字成为垂直排列的两个子项，再用align-items: center让它们整体水平居中 - 文字容器（如
<span></span>）加text-align: center，确保多行文字自身也居中 - 避免给文字容器设
width: 100%又不设white-space: normal，否则可能强制不换行 - 示例结构：
<div class="btn"><svg></svg><span>点击上传文件</span></div>
，CSS中.btn { display: flex; flex-direction: column; align-items: center; }，span { text-align: center; }
display: flex，或者中间插了个div意外打断了flex上下文。还有人把图标包在<a></a>里又忘了a默认是inline，得手动设display: flex，这些细节比属性本身更容易漏。 
