模态框居中必须用flex+items-center+justify-center且父容器设min-h-screen，三者同级作用于同一父容器；仅加其一无效，脱离flex类则失效，绝对定位会破坏该方案。
模态框居中必须用 flex + items-center + justify-center，且父容器要有高度
只加 items-center 或只加 justify-center 都不会生效——这两个类是 flex 专用指令，脱离 flex 类就等于没写。更常见的是父容器没设高度，比如用 div 包着模态框但没加 min-h-screen 或 h-screen，结果模态框还是贴在顶部。
正确写法是三者同级作用于同一个父容器：
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white rounded-lg p-6 w-full max-w-md">
<p>这是模态框内容</p>
</div>
</div>
-
min-h-screen比h-screen更安全：内容少时不会出现滚动条或底部留白 - 子元素（模态框本身）建议显式设
block（Tailwind 默认就是），避免被当成 inline 元素导致对齐异常 - 如果模态框有
position: absolute，这套 flex 居中会失效——绝对定位元素已脱离文档流
为什么用 place-items-center 有时反而出问题？
place-items-center 看起来更简洁，但它在 flex 和 grid 容器里都生效，而你可能只想要 flex 行为。旧项目用 Tailwind 2.x 就不支持这个类；更隐蔽的问题是：如果父容器意外用了 grid，place-items-center 会按 grid 规则对齐，和预期不一致。
它同样依赖父容器有可测量高度，否则照样塌缩。不是“换一个类就能绕过高度限制”。
立即学习“前端免费学习笔记（深入）”；
- Tailwind 3.0+ 才支持
place-items-center - 若项目混用 flex 和 grid 布局，优先用明确的
flex items-center justify-center - 别指望它解决子元素宽高不确定带来的溢出问题——该加
max-w-md还得加
移动端需要遮罩层时，怎么避免滚动穿透？
模态框弹出后，背景内容还能滚动，是因为 body 没禁用 overflow。Tailwind 不提供 overflow-hidden 的响应式开关，得手动控制。
- 打开模态框时，给
body加overflow-hidden类（需 JS 配合） - 模态框自身加
fixed inset-0，确保覆盖全屏 - 遮罩层用
bg-black/50+z-40，模态框内容用z-50 - 别用
text-center对齐模态框——那是针对行内元素的，对块级div无效
图片作为模态框主体时，如何撑满又居中？
直接给 img 加 w-full h-full object-cover 是常见做法，但前提是父容器（模态框内容区）有明确宽高，否则会塌缩成一条线。
- 父容器必须设
h-96、min-h-64或类似固定/最小高度 - 图片加
block（默认已有），避免 inline 行为干扰object-fit - 如果图片比例和容器不匹配，
object-contain比object-cover更安全，但会有留白 - 别用
text-center或mx-auto单独处理图片——它在 flex 容器里会被items-center和justify-center覆盖
最容易被忽略的是：所有居中方案都依赖父容器提供可测量的交叉轴尺寸。没有高度，再全的类也动不了——这不是 Tailwind 的缺陷，而是 CSS Flexbox 的底层规则。
