加了justify-center和items-center却没反应，是因为二者仅在flex容器中生效且依赖父容器有明确高度；必须同时添加flex和h-screen（或min-h-screen等高度类），缺一不可。
直接加 flex justify-center items-center h-screen 就能实现全屏居中，但多数人失败是因为漏了高度约束或 flex 容器没生效。
为什么加了 justify-center 和 items-center 却没反应？
这两个类只在 flex 容器里起作用，单独写无效。而且它们依赖父容器有明确高度——h-screen 是最常用、最可靠的方案。
-
flex必须和justify-center、items-center同时存在，缺一不可 -
h-screen不是可选的“美化项”，而是让垂直居中有参照基准的关键 - 如果父容器是
div且没设高度（比如只写了min-h-0或没写任何高度类），items-center就会失效 - 别用
h-full替代h-screen：它只继承父元素高度，而父元素很可能没高度
flex-col 容器里怎么让子元素居中？
主轴变成垂直方向后，justify-center 控制的是垂直居中，items-center 反而管水平对齐——顺序不变，但语义变了。
- 写法仍是
flex flex-col justify-center items-center h-screen - 别误以为要换用
justify-items-center（这是 grid 类，不适用于 flex） - 如果子元素是文字，注意默认
text-align不影响 flex 子项，靠items-center水平居中即可 - 长文本可能换行挤压布局，加
whitespace-nowrap或truncate控制溢出
Grid 方案比 Flex 更省事？
是的，grid place-items-center h-screen 一行搞定，还不用纠结主轴方向。但它要求父容器必须有高度上下文，这点和 flex 完全一致。
-
place-items-center等价于同时设置justify-items-center和align-items-center - 不依赖 display 方向，
flex-col场景下不用改类名，更不容易出错 - IE 不支持，但现代项目基本无需兼容 IE，可放心用
- 如果后续要加多列/多行布局，grid 扩展性更强；单纯居中，两者性能无差别
真正卡住人的从来不是类名记不住，而是忘了所有居中方案都依赖「父容器有可测量的高度」——没 h-screen、min-h-screen 或显式 h-96，再多个 center 类也托不起内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
