items-center单独使用无效，因其仅在flex布局中生效；必须配合flex且父容器有可测量高度（如min-h-screen），子元素建议设block，flex-col下需justify-center实现垂直居中。
为什么items-center单独加没反应
因为items-center只是 flex 专用对齐指令，不启用 flex 布局就完全无效。浏览器看到它但没flex类，直接忽略。
常见失效组合：
- 只写
items-center，没加flex - 加了
flex，但父容器高度是auto（比如没设h-screen或min-h-screen） - 子元素是
span这类 inline 元素，没显式加block或inline-block
flex items-center justify-center必须同时作用于同一父容器
这三个类缺一不可，且不能拆到不同层级。例如把flex写在父级、items-center写在子级，子级的items-center不会影响父级 flex 上下文。
关键约束：
- 父容器必须有可测量的高度：推荐
min-h-screen（比h-screen更安全，防内容少时塌缩） - 子元素建议设
block（尤其当它是span或未设 display 的文本节点） - 避免在子元素上误加
shrink-0或固定h-*，可能压缩/截断导致视觉偏移
用flex-col时items-center反而不管垂直方向
因为flex-col把主轴变成垂直方向，此时items-center作用于交叉轴——也就是水平方向。垂直居中必须靠justify-center。
所以flex flex-col items-center justify-center和flex items-center justify-center效果一致，只是逻辑路径不同。统一写全三个类最省心，不用记主轴方向。
别碰justify-items-center：它是 Grid 类，在 Flex 容器里完全无效。
替代方案place-items-center要注意兼容性
place-items-center是justify-center items-center的简写，Tailwind 3.0+ 才支持。它在 Flex 和 Grid 容器里都生效，但容易引发意外：
- 如果父容器意外用了
grid，行为可能和预期不符 - 它不解决高度问题——没
min-h-screen，照样塌缩 - 旧项目升级前需确认 Tailwind 版本，否则类名不编译
真正容易被忽略的是：所有居中方案都依赖父容器提供可测量的交叉轴尺寸。没高度，再全的 class 也动不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
