最简写法是flex items-center justify-center；必须同时添加flex类、明确父容器高度（如min-h-screen），且子元素建议设block，否则items-center无效。
Flexbox垂直居中最简写法是flex items-center justify-center
Tailwind里没有单独的“垂直居中”工具类，必须组合使用flex + items-center（主轴对齐，即y轴）+ justify-center（交叉轴对齐，即x轴）。很多人只加items-center却忘了父容器要设flex，结果样式完全不生效。
常见错误现象：div里文字没动、子元素仍贴顶、控制台无报错但布局无效——大概率是漏了flex或父容器高度为auto。
- 父容器必须有明确高度（如
h-screen、h-64或min-h-screen），否则items-center无参考基准 - 子元素不能设
float、position: absolute等脱离文档流的属性，否则flex对其失效 - 若需仅垂直居中（水平不居中），去掉
justify-center，保留items-center
为什么flex items-center有时不生效？检查这三点
不是Tailwind写错了，而是Flex上下文没建立起来。核心问题永远在父级容器。
-
父容器缺少display: flex：必须用flex类，inline-flex也行，但grid或block类会覆盖它 -
父容器高度塌陷：比如子内容为空或只有内联元素，此时加h-full前要确认父容器本身有高度（可临时加bg-red-200肉眼验证） -
子元素设了margin:auto：在Flex容器里，margin: auto会抢占居中逻辑，优先级高于items-center，删掉即可
替代方案：place-items-center更简洁但兼容性略低
这是Tailwind 3.0+引入的快捷类，等价于items-center justify-items-center，但注意：它作用于place-items CSS属性，对Flex容器支持良好，但在旧版Chrome（
- 适用场景：现代项目、已锁定浏览器版本、或配合
grid布局时（place-items-center对Grid更自然） - Flex下仍推荐
flex items-center justify-center，兼容性零风险 - 别混淆
place-items-center和place-content-center：后者控制的是整个内容块的分布，不是单个子项
响应式垂直居中要避免断点嵌套陷阱
想在小屏取消居中？别写sm:items-start md:items-center——items-start和items-center互斥，但Tailwind不会报错，容易误以为生效了。
- 正确做法：用
md:flex md:items-center md:justify-center控制“何时开启Flex居中”，小屏默认block流式布局 - 如果小屏也要Flex但不同对齐，用
flex sm:items-start md:items-center，确保所有断点都显式声明flex - 慎用
hidden类隐藏再显示：会导致DOM重排，视觉闪动，不如用opacity-0 h-0 overflow-hidden平滑过渡
border和h-48看是否撑开，比反复查class拼写管用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
