flex-col + items-center 只能水平居中，因 flex-col 将主轴设为垂直，items-center 作用于交叉轴（即水平方向）；要垂直居中必须搭配 justify-center，并配合 flex 和显式高度（如 h-screen）。
用 flex-col 和 items-center 实现居中，关键在于理解主轴和交叉轴的方向变化——flex-col 把主轴变成垂直方向，此时 items-center 控制的是**水平居中**，不是垂直居中。
为什么 flex-col + items-center 只能水平居中？
因为：
-
flex-col意味着主轴是垂直的（从上到下），所以justify-*类才管垂直对齐 -
items-center始终作用于交叉轴；主轴垂直 → 交叉轴就是水平 → 它只让子元素在**左右方向居中** - 若没配
justify-center，子元素会默认贴在顶部，不会上下居中
要真正垂直+水平居中，必须加 justify-center
当父容器设为 flex flex-col，正确写法是三者一起用：
-
flex：启用 Flex 布局（必不可少） -
flex-col：设定主轴为垂直 -
justify-center：让子元素在主轴（即垂直方向）居中 → 解决上下居中 -
items-center：让子元素在交叉轴（即水平方向）居中 → 解决左右居中
等价于 flex flex-col justify-center items-center，效果和 flex justify-center items-center 一样，只是布局顺序不同。
别忘了高度约束，否则看不出居中效果
如果父容器高度是默认的 auto，它只会包裹内容，没有“可居中的空间”。必须显式设高：
-
h-screen：占满视口高度（适合全屏居中） -
min-h-screen：最小高度为视口，内容多时可撑开 -
h-64、h-[300px]等：固定高度，适合卡片、弹窗等场景
替代写法：place-items-center 更简洁
Tailwind 3.0+ 支持 place-items-center，它是 justify-items-center items-center 的简写，在 Flex 容器中等价于 justify-center items-center：
- 写成
flex flex-col place-items-center h-screen，语义更清晰、代码更短 - 注意兼容性：旧版浏览器或极老版本 Tailwind 不支持，但当前主流环境没问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
