最常见原因是父容器没设高度；items-center仅控制交叉轴（垂直），justify-center控制主轴（水平），二者需配合flex及明确高度（如h-screen）才生效。
用 flex + items-center + justify-center 居中时，为什么子元素没动？
最常见原因是父容器没设高度。Flex 居中依赖父容器的尺寸上下文，items-center 控制交叉轴（垂直），justify-center 控制主轴（水平），但若父容器高度为 auto（比如 div 默认行为），它就只包裹内容，没有“可居中的空间”。
实操建议：
- 给父容器显式设高，例如
h-screen（视口全高）、h-64或min-h-screen - 确保父容器启用了 Flex：必须加
flex类，仅items-center不生效 - 检查子元素是否设置了
flex-shrink: 0类（如shrink-0）或固定宽高——否则在小容器里可能被压缩变形
只用 items-center 能不能垂直居中？
不能单独靠它实现“水平+垂直”居中。items-center 只管交叉轴，对 flex 默认 flex-row（主轴水平）来说，它只负责垂直方向；水平方向必须配 justify-center。如果父容器是 flex-col，那 items-center 就管水平了，此时需搭配 justify-center 管垂直——所以关键不是某个类名，而是主轴方向。
快速确认方式：
立即学习“前端免费学习笔记（深入）”；
- 默认
flex=flex-row→ 主轴水平 →justify-管水平，items-管垂直 -
flex-col→ 主轴垂直 →justify-管垂直，items-管水平 - 想少记规则？统一写
flex items-center justify-center，它在两种主轴下都有效
替代方案：place-items-center 更简洁，但要注意兼容性
Tailwind 3.0+ 提供了 place-items-center，它是 justify-items-center items-center 的简写，适用于 Grid 和 Flex 容器。在 Flex 场景下，它等价于 items-center justify-center。
但要注意：
-
place-items-center在旧版 Tailwind（placeItems 插件时不会生效 - 它对 Grid 容器更自然；Flex 下虽可用，但语义稍弱（
place-原本面向 Grid 的place-items） - 若项目用的是 CDN 版 Tailwind 或锁定旧版本，优先用明确的
flex items-center justify-center
居中后内容溢出或换行错乱怎么办？
Flex 居中本身不控制子元素内部布局，常见问题有：文字过长撑破容器、图片无约束拉伸、多行内容堆叠错位。
典型修复手段：
- 文字加
text-center或whitespace-normal防止单字溢出 - 图片加
max-w-full h-auto保比例，再套object-contain（必要时） - 若子元素是多个并列项（如按钮组），避免直接居中整个 group，改用
flex gap-2+justify-center让它们自身对齐 - 调试时临时加
border border-red-500查看实际盒模型范围，比猜更可靠
flex items-center justify-center 这串组合像一把钥匙，但锁孔得先存在。 
