只加 items-center 不会垂直居中，因其仅在 flex 容器的交叉轴生效，必须配合 flex 启用布局且父容器需有明确高度；最稳写法是同一父容器上同时使用 flex、justify-center 和 items-center。
直接加 items-center 不会垂直居中，必须配合 flex 和明确高度；最稳的写法是 flex justify-center items-center 同时作用于同一父容器。
为什么只加 items-center 没反应？
items-center 只在 flex 容器的交叉轴上生效，它本身不启用 flex 布局。常见错误是给一个普通 <div> 直接加 items-center，但没加 flex，结果类名被浏览器完全忽略。
- 没加
flex→ 浏览器当普通 class 处理，无任何 CSS 效果 - 父容器高度为
auto（比如没设h-screen或min-h-screen）→ 交叉轴无“可居中空间”，即使生效也看不出效果 - 子元素是
<span>或未设block的行内元素 →items-center对齐行为可能异常，建议加block显式声明
flex justify-center items-center 必须一起用吗？
是的，三者缺一不可，且必须作用于同一个父容器：
-
flex：启用 flex 布局（等价于display: flex） -
justify-center：控制主轴对齐，默认主轴是水平方向，所以它管水平居中 -
items-center：控制交叉轴对齐，默认交叉轴是垂直方向，所以它管垂直居中 - 如果改用
flex-col，主轴变成垂直，justify-center就转而控制垂直居中，items-center反而控制水平——容易搞反，不推荐隐式依赖
推荐显式写全：flex flex-row justify-center items-center，避免方向混淆。
立即学习“前端免费学习笔记（深入）”；
父容器没高度，怎么补救？
Flex 居中失效，80% 是因为父容器高度塌缩。不能只靠内容撑开，必须提供可测量的交叉轴长度：
- 全屏场景：用
h-screen或更稳妥的min-h-screen（防内容少时高度不足） - 固定尺寸容器：如
h-64 w-64，确保宽高都明确 - 响应式容器：可用
min-h-[50vh]或结合aspect-w-1 aspect-h-1控制比例 - 嵌套场景：若父容器本身是 flex item，需确认其父级是否已分配高度（比如加了
flex-1或h-full）
还有哪些替代方案？各自坑在哪？
不是所有场景都适合 flex，得看约束条件：
-
grid place-items-center：简洁，但父容器必须加grid类，否则无效；适用于单个子元素，多元素时行为不如 flex 可控 -
absolute inset-0 m-auto：要求子元素有明确width和height，否则m-auto在垂直方向不生效；旧版 Tailwind（v2.x）不支持inset-0，得拆成top-0 right-0 bottom-0 left-0 -
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2：不依赖子元素尺寸，但父容器必须设relative；translate基于自身宽高，若图片未加载完成、尺寸未知，可能短暂偏移
真正容易被忽略的是：居中效果是否被滚动条、父级 overflow 或动态内容加载时机破坏——这些不会报错，但会让居中“偶尔失效”。
