align-items: center 控制 Flex 子项在交叉轴上的居中，text-align: center 控制块级子元素内行内内容的水平对齐；二者需配合使用：前者居中子项，后者居中子项内的文字。
在弹性盒子（Flexbox）布局中，align-items: center 和 text-align: center 各司其职，混用不当就容易“看起来没居中”。问题往往不是代码写错了，而是没理解它们分别控制哪一层的对齐。
align-items: center 控制的是子元素在交叉轴上的位置
它只对 Flex 容器的**直接子元素**生效，让这些子项整体在交叉轴（比如 column 时是水平方向，row 时是垂直方向）上居中。但它**不控制子元素内部文字的对齐方式**。
- 如果子元素是块级元素（如 div、p），它的文字是否居中，取决于它自身的
text-align - 如果子元素是行内元素（如 span）或没有设定宽高，
align-items可能“看不见效果”，因为它的高度可能由内容撑开，没有留出对齐空间
text-align: center 控制的是行内内容在所在块级元素内的水平对齐
它只对当前元素内部的文本、图片等**行内级内容**起作用，前提是该元素本身是一个**块级容器**（如 div、p、section），且有明确的宽度（否则默认占满父容器，居中看不出变化）。
- 给 Flex 子项（比如一个
text-align: center，才能让里面的文字水平居中 - 如果子项是
这类行内元素，默认不会换行也不会独占一行，text-align对它无效——得先设display: block或inline-block
常见失效场景和解决方法
-
子项没设高度，align-items 看不出效果：给子项加
height或min-height，或确保父容器有明确高度（尤其 flex-direction: column 时） -
文字垂直居中不生效：仅靠
text-align: center不管用；需配合align-items: center（flex-direction: row）或justify-content: center（flex-direction: column），且子项要有高度 -
单行文字想水平+垂直居中：Flex 容器设
display: flex; align-items: center; justify-content: center;，子项无需额外 text-align（除非它内部还有多行/复杂结构） -
多行文字垂直居中：确保子项有固定高度或最小高度，并设
display: flex; flex-direction: column; justify-content: center;，再加text-align: center控制水平
一个小而全的示例
让一个卡片里的标题文字真正水平+垂直居中：
立即学习“前端免费学习笔记（深入）”；
.card {
display: flex;
align-items: center; /* 垂直居中子项 */
justify-content: center; /* 水平居中子项 */
height: 200px;
border: 1px solid #ccc;
}
.card h2 {
margin: 0;
text-align: center; /* 确保多行文字也水平居中 */
}这里 h2 是块级元素，text-align 起效；整个 .card 用 flex 居中它，就实现了真正的居中。
