最稳居中方案是fixed inset-0 flex items-center justify-center，因不依赖子元素宽高、避免transform错位与ios模糊，且遮罩层用w-screen h-screen确保撑满视口，配合bg-black/50保内容清晰。
直接用 fixed inset-0 flex items-center justify-center，这是 Tailwind 下最稳、最不易翻车的居中方案，比手写 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 更可靠，也比 inset-0 m-auto 少一堆尺寸限制条件。
为什么不用 top/left + transform？
这套老办法在动态内容下容易错位：比如弹窗里图片还没加载完，高度为 0，transform: translate(-50%, -50%) 就按 0 高度算，结果弹窗飘在半空；iOS Safari 对 transform 的渲染也有偶发模糊问题。更重要的是，它需要你手动确保父容器是 position: relative 或 fixed，而实际项目里常因祖先元素加了 transform 或 filter，导致定位参考系意外偏移。
用 flex 居中则完全规避这些——只要遮罩层是 fixed 且撑满视口，子元素天然居中，不依赖弹窗自身宽高，也不触发重排。
遮罩层必须用 fixed + 100vw/100vh
常见错误是只写 w-full h-full，结果遮罩只盖住内容区，滚动时跟着动，或底部留白。因为 100% 是相对于父容器计算的，而父容器未必撑满视口。
-
top-0 left-0 w-screen h-screen最稳妥（w-screen=100vw，h-screen=100vh） - 若页面有横向滚动条，
w-screen可能被挤窄，可补min-w-screen - 务必检查所有祖先是否加了
transform、overflow: hidden或filter—— 这些会创建新层叠上下文，让fixed相对于该祖先而非视口定位
弹窗内容容器要防溢出和 Safari 收缩异常
小屏上 w-full 会溢出，但写死 w-96 又不响应。正确组合是：w-full max-w-md —— 宽度自适应，上限卡在合理尺寸。
如果弹窗含长文本、表格或代码块：
- 加
overflow-y-auto和max-h-[80vh]，防止内容撑高导致底部不可见 - iOS Safari 中，flex 子项默认不收缩，记得给弹窗内容区加
min-h-0 - 关闭按钮用
absolute top-4 right-4，别用float-right（在 flex 布局里失效）
点击遮罩层关闭时，事件冒泡必须拦截
点遮罩层关弹窗，但点弹窗内部任何地方（按钮、输入框）也触发关闭，就是没阻止冒泡。
纯 HTML/CSS 场景下，JS 绑定最简写法：
document.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
e.currentTarget.remove();
}
});
React/Vue 中用 @click.stop 或 onClick={(e) => e.stopPropagation()} 即可。别指望 CSS 类自动处理交互逻辑——Tailwind 不管这个。
真正容易被忽略的是：遮罩层背景必须用 bg-black/50（即 rgba(0,0,0,0.5)），而不是 opacity-50。后者会让整个遮罩层（包括里面的关闭按钮、图标）都变透明，文字直接发虚。视觉和可访问性都会崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
