items-center 单独无法垂直居中，因为它仅在 flex 容器的交叉轴生效，需父容器设 display: flex（或 flex-col）、有明确高度（如 min-h-screen），且主轴方向决定交叉轴方向；最稳妥方案是 flex + items-center + justify-center 同时作用于同一父容器。
为什么 items-center 单独用不了垂直居中？
因为 items-center 只对 flex 容器的**交叉轴**起作用，而它是否生效，取决于父容器是不是 flex 布局、主轴方向、以及子元素是否“有高度可参考”。常见错误是直接给一个 div 加 items-center，但没设 display: flex 或 flex-col，结果完全没反应。
真正起效的前提是：父容器必须是 flex 容器，且子元素在交叉轴上有可居中的空间（比如父容器有明确高度，或设了 min-h-screen）。
- 没加
flex类 →items-center被忽略 - 父容器高度为
auto（内容撑开）→ 交叉轴没“剩余空间”，居中视觉上不明显 - 用了
flex-row（默认），交叉轴是垂直方向 →items-center管垂直居中 - 用了
flex-col，交叉轴变成水平方向 → 此时items-center反而管水平居中
最稳妥的垂直居中组合：flex + items-center + justify-center
这是 Tailwind 中实现“绝对居中”（水平+垂直）最常用、兼容性最好、语义最清晰的写法。它不依赖子元素尺寸，也不要求 JS 计算，纯 CSS。
关键点在于：三个类必须同时作用于**同一个父容器**，且该容器需有可测量的高度范围（比如全屏、固定高、或继承父高）。
-
flex：启用 flex 布局（等价于display: flex） -
items-center：交叉轴居中 → 垂直方向（因默认flex-row） -
justify-center：主轴居中 → 水平方向 - 推荐搭配
min-h-screen或h-screen，避免父容器塌陷
示例：
<div class="flex items-center justify-center min-h-screen"> <div class="bg-blue-200 p-4">我被垂直+水平居中了</div> </div>
只垂直居中、不水平居中？注意 justify-start / justify-end 的干扰
如果只需要垂直居中，但希望子元素靠左/右对齐，不能只删掉 justify-center —— 默认 justify-start 会把内容挤到左侧，看起来像“没居中”，其实是水平方向没动，垂直方向确实居中了。
这时候要明确控制水平对齐方式，否则容易误判效果。
- 保留
flex items-center，再加justify-start（左对齐）、justify-end（右对齐）或justify-between（两端对齐） - 如果子元素是块级且宽度 100%，
justify-start和justify-center视觉无差别，容易漏掉问题 - 移动端下，
justify-center可能导致文字在窄屏中换行错位，此时改用justify-start更可控
替代方案：grid + place-items-center 更简洁但兼容性略低
如果你项目支持较新浏览器（Chrome 66+、Firefox 63+、Safari 11.1+），place-items-center 是更短的写法，等价于 justify-items-center align-items-center，配合 grid 即可单行实现居中。
但它依赖 CSS Grid，IE 完全不支持；而且当父容器是 grid 时，子元素的盒模型行为和 flex 有细微差异（比如 margin: auto 在 grid 中依然有效，但在 flex 中可能被覆盖）。
- 写法更短：
class="grid place-items-center min-h-screen" - 不改变主轴/交叉轴概念，语义比 flex 组合更统一
- 嵌套 grid 容器时，
place-items-center会影响所有直接子项，灵活性不如 flex 的逐层控制 - 若需兼容 IE11，必须退回 flex 方案
实际项目里，flex items-center justify-center 还是最稳的选择。真正容易被忽略的是：父容器的高度来源——很多人写了类却忘了给父容器设高，结果整个 flex 区域高度为 0，再怎么居中也看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
