fixed + inset-0 + flex 居中是首选，因其确保遮罩层覆盖整个视口且不随滚动偏移，flex items-center justify-center 在有明确高度的容器内精准居中内容，无需预知模态框宽高。
为什么 fixed + inset-0 + flex 居中是首选
因为 fixed inset-0 确保遮罩层覆盖整个视口，不随滚动偏移；flex items-center justify-center 在有明确高度的容器内精准居中内容，且无需知道模态框宽高。如果只用 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2，必须保证父容器是 relative，而模态框通常要挂到 body 下——这时父容器是 body，它默认不是 relative，会导致定位失效。
z-index 层叠顺序不能只靠数字大小
模态框必须高于页面所有内容，但光写 z-50 不够：很多项目在导航栏、Toast 或 Tooltip 上用了 z-50 甚至 z-9999，结果模态框被盖住。更关键的是，如果某个父容器设置了 transform、filter 或 perspective，它会创建新的层叠上下文，导致子元素的 z-index 只在该上下文中生效——你设了 z-50，但它可能仍低于根层级的 z-10 元素。
- 把模态框直接挂到
document.body下，避开干扰的父层叠上下文 - 遮罩层用
z-40，模态框内容用z-50，关闭按钮或加载指示器用z-51 - 避免在模态框内部再嵌套
transform或filter，否则 backdrop-blur 可能失效
响应式宽度控制必须分层，不能只靠断点类
写 max-w-md md:max-w-lg 是常见错误：小屏下 max-w-md 会被忽略，变成无约束的 w-full，撑满屏幕但留边不足；大屏下又可能太窄。真正有效的组合是：
- 默认（小屏）：
max-w-full mx-4—— 宽度占满，左右留 1rem 边距 - 中屏起（
md:）：md:max-w-md md:mx-auto—— 居中，上限 28rem - 大屏可选（
lg:）：lg:max-w-lg—— 避免文字行长过长，影响可读性 - 内容区加
max-h-[80vh] overflow-y-auto，防止内容溢出底部不可见
backdrop-blur 在 Safari 和微信里不生效？先检查这三处
backdrop-blur-md 在 Safari ≤16.6 和微信 X5 内核里默认不工作，而且不报错。不是类名写错，而是渲染链路缺失：
- 必须给模态框加
relative（建立层叠上下文，否则 backdrop 采样区域被裁） - 背景必须是半透明：
bg-white/10有效，bg-white或bg-gray-50直接失效 - 必须手动补 WebKit 前缀：
-webkit-backdrop-filter: blur(8px)，数值需和backdrop-blur-md一致（Tailwind 默认md=8px） - 微信 X5 内核完全不支持，fallback 推荐用
bg-black/5 blur-sm（作用于自身），别用filter: blur()，性能差还糊成一片
最易被忽略的是：backdrop-blur 的采样源必须是“真实存在的背后内容”。如果模态框挂到了空 wrapper 里，或者父容器加了 overflow: hidden，模糊就彻底消失——它不是样式没加载，是根本没东西可模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
