items-center 单独无效，因它仅在 flex 容器的交叉轴生效；必须配合 flex、justify-center 及高度约束（如 min-h-screen）才能实现垂直+水平居中。
直接给元素加 items-center 不会垂直居中——它只在 flex 容器的交叉轴上生效，而你大概率还没启用 flex 布局，也没给父容器设高度。
为什么 items-center 单独用不了？
因为 items-center 不是“垂直居中开关”，它是 flex 布局下的交叉轴对齐指令。浏览器看到一个普通 div 上只有 items-center，就当它是个无意义的 class，完全忽略。
- 没加
flex→ 类名不触发任何 CSS 规则 - 父容器高度为
auto（默认行为）→ 交叉轴没有可分配的空间，即使生效也看不出效果 - 用了
flex-col→ 主轴变成垂直，items-center就管水平对齐了，不是你要的“垂直”
flex items-center justify-center 必须一起用，且作用于同一父容器
这是最稳、最直觉、兼容性最好的组合。三个类缺一不可，且必须写在同一个父级元素上：
-
flex：启用 flex 布局（等价于display: flex） -
justify-center：控制主轴（默认flex-row下是水平方向） -
items-center：控制交叉轴（默认下就是垂直方向）
别省略 flex，也别拆到不同层级；同时补上高度约束，比如 min-h-screen 或 h-64，否则父容器塌缩，居中无从谈起。
立即学习“前端免费学习笔记（深入）”；
<div class="flex items-center justify-center min-h-screen"> <div class="bg-blue-200 p-4">我被垂直+水平居中了</div> </div>
替代方案：什么时候该换别的方法？
不是所有场景都适合 flex，得看约束条件：
- 子元素宽高不确定（比如一段动态文字气泡）→ 用
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2，不依赖尺寸 - 父容器已设
position: relative，且子元素有明确w-48 h-48→ 可用absolute inset-0 m-auto，但 Tailwind v2.x 不支持inset-0，得写全top-0 right-0 bottom-0 left-0 - 要后续扩展为多列响应式布局 → 用
grid place-items-center，但必须加grid类，否则无效
Grid 的 place-items-center 和 Flex 的 items-center justify-center 行为机制完全不同，混用会导致不可预期结果。
文本内容垂直居中，别碰 leading-
leading- 类本质是设置行高（line-height），靠拉高行距“挤”出垂直空间。它只在容器高度固定、且行高等于容器高度时才勉强有效，而 Tailwind 最大只提供 leading-10（2.5rem），根本不够大多数 h-12（3rem）场景。
- 容器高度是
h-12（3rem），leading-10（2.5rem）→ 文本依然偏上 - 文字换行或字体变化 → 行高对齐立刻失效
- 响应式下高度变化 →
leading-无法自适应
正确做法：把文本容器本身设为 flex，加 items-center justify-center。一行代码解决，稳定且语义清晰。
