根本原因是父容器既没启用flex上下文，也没提供可测量的交叉轴空间；需同时满足：启用display:flex、父容器有明确高度（如h-screen）、子元素非inline级。
flex items-center justify-center 为什么没反应
根本原因是父容器既没启用 Flex 上下文，也没提供可测量的交叉轴空间。items-center 和 justify-center 是纯对齐类，不带 flex 就完全无效；而即使加了 flex，若父容器高度是 auto（比如普通 div 默认行为），它就只包裹内容，items-center 没有“可居中的垂直空间”可作用。
必须同时满足三个条件：
-
flex类已添加（启用 display: flex） - 父容器有明确高度来源，如
h-screen、min-h-screen、h-64等 - 子元素不是
inline级（如span），否则建议显式加block或inline-block
错误写法：<div class="items-center justify-center">...</div> —— 缺 flex，浏览器直接忽略这两个类。
父容器高度该用 h-screen 还是 min-h-screen
min-h-screen 更安全，尤其在内容少或动态加载时。h-screen 强制占满视口高度，但若子内容超出，会触发滚动且底部可能被截断；min-h-screen 则保证至少一屏高，内容多时自动撑开，不会压扁子元素。
别用 h-full 替代——它只继承父元素高度，而外层父元素很可能没设高，结果还是 height: 0。
常见踩坑点：
- 在 Modal 或 Card 内部嵌套居中时，忘了给 Modal 容器本身设
min-h-screen或显式h-[500px] - 用了
flex-col后仍写justify-center以为是水平居中，其实此时它控制的是垂直方向 - 子元素设了
shrink-0或固定h-12，但父容器高度不够，导致视觉上“卡在顶部”
place-items-center 能不能直接替代 flex + justify-center + items-center
能，但仅限父容器是 grid。Tailwind 的 place-items-center 是 justify-items-center align-items-center 的简写，它对 flex 容器无效——写了也白写。
正确用法：<div class="grid place-items-center h-screen">...</div>
优势是语义更简洁、不依赖主轴方向（flex-row 或 flex-col 都不用管）；劣势是 IE 不支持，且若后续要加响应式列数（如 grid-cols-2），得额外处理子项分布逻辑。
如果你已经用了 flex 布局链（比如外层 flex flex-col + 中间 flex-1），硬切 grid 反而增加嵌套复杂度，不如坚持 flex items-center justify-center。
图片或文字单独垂直居中怎么写
别碰 leading-* 配 h-，那只是靠行高“撞运气”，数值稍不匹配就上下留白不均，且单行文本还行，换行或响应式缩放立刻失效。
可靠写法统一用 flex items-center：
- 只垂直居中：加
justify-start（防默认justify-center把它推到中间） - 图片需块级表现：Tailwind 默认
img是inline，加block或inline-block更稳 - 按钮内图标+文字：直接
flex items-center gap-2，gap-2控制间距，items-center天然对齐基线
最容易被忽略的一点：所有居中方案都卡在「父容器有没有可测量的高度」。没 h-screen、没 min-h-screen、没 flex-1 上级容器，再多个 center 类也托不起内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
