text-align:center对多行文本垂直居中无效，它仅控制主轴（默认水平）上每行文字的对齐；真正实现垂直居中需align-items:center配合固定高度容器及justify-content:center。
flex布局中text-align:center对多行文本无效？
不是text-align失效，是它根本不管“垂直”那档子事——它只负责**行内内容在主轴（默认水平）上的对齐**。多行文本在display: flex容器里，若只设text-align: center，顶多让每行文字居中，但整块文本上下还是贴着顶部或底部。
真正起作用的是align-items（交叉轴对齐）和justify-content（主轴对齐），配合flex-direction: column或默认row来定方向。
-
align-items: center让所有子元素（包括span、p等）在交叉轴上居中 - 如果容器高度固定，且文本是单个块级元素（如
p），align-items: center+justify-content: center就够了 - 若文本本身换行多次，又想整体视觉居中，必须确保父容器有明确高度（比如
height: 200px），否则align-items无参考基准
用flex实现多行文本真·垂直居中，三步不能少
常见写法display: flex; align-items: center; justify-content: center看似万能，但漏掉关键约束就会失效——尤其遇到响应式容器或动态内容时。
- 父容器必须有**可计算的交叉轴尺寸**：要么显式设
height或min-height，要么用flex: 1继承父级高度（比如在全屏body > main里） - 文本容器（如
p或div）不能设margin: auto以外的强制偏移，否则会干扰align-items计算 - 避免给文本元素设
vertical-align——它对flex子项完全无效，纯属干扰项
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: center;
justify-content: center;
height: 150px; /* 必须！ */
border: 1px solid #ccc;
}
<p>.container p {
margin: 0; /<em> 清除默认边距 </em>/
text-align: center; /<em> 可选：让每行内部居中 </em>/
}IE11兼容性下flex垂直居中会出什么问题？
IE11对align-items和justify-content支持不完整，尤其当容器含min-height而非height时，align-items: center大概率失效，文本卡在顶部。
- 最稳方案：改用
display: -ms-flexbox前缀 +-ms-flex-align: center和-ms-flex-pack: center - 更省心做法：降级为
display: table-cell+vertical-align: middle，但要求父容器设display: table且有固定高度 - 注意：IE11不支持
flex: 1在非直接子元素上生效，所以嵌套flex容器要格外小心层级
为什么加了flex却还是没居中？检查这四个地方
90%的“flex居中失败”不是语法错，而是隐性条件缺失。
- 父容器是否被其他CSS重置了高度？比如
height: auto或max-height: 0 - 文本是否包裹在未设
display: block的内联元素里（如span）？flex只对块级或flex子项生效 - 有没有意外触发
flex-wrap: wrap导致子项换行后占据多行，从而改变交叉轴对齐逻辑？ - 是否用了
position: absolute把文本移出了flex流？此时align-items彻底失效
复杂点永远在边界条件里：高度来源、元素显示类型、浏览器解析差异——这些不写进代码里，光靠display: flex三个字撑不住。
