最稳方案是position: fixed + inset: 0 + display: flex；因top: 50%+transform依赖自身尺寸且受缩放、地址栏跳变、DPR及WebView兼容性影响，易偏移错位，而inset: 0更可靠，flex双轴居中需justify-content与align-items共用，z-index须足够大并挂载body顶层。
直接用 position: fixed + display: flex 是目前最稳的方案，其他写法在 iOS Safari 地址栏收放、双指缩放、高 DPR 屏幕或老版 WebView 下容易漏边、错位或被裁剪。
为什么不能只用 top: 50% + transform: translate(-50%, -50%)
这个组合依赖弹窗自身尺寸计算偏移量，而图片未加载、字体渲染差异、横屏切换、甚至软键盘弹出都会导致高度浮动。iOS Safari 在地址栏隐藏/展开瞬间会重算 100vh，从 667px 跳到 736px，弹窗就会上移一截。更麻烦的是，某些安卓 WebView 对 transform 的解析不一致，1px 偏移很常见。
-
top: 50%是相对于父容器定位，不是视口；如果遮罩没设position: fixed，它可能随滚动偏移 -
transform不触发合成层优化时，动画还可能卡顿 - 一旦页面有
zoom或font-size变动，居中就不可控
position: fixed 遮罩层必须写的属性
缺一不可，否则要么遮罩不全屏，要么内容不居中，要么被其他组件盖住：
-
position: fixed—— 锚定视口，不随滚动偏移 -
inset: 0（或top: 0; right: 0; bottom: 0; left: 0）—— 比width: 100vw; height: 100vh更可靠，绕过旧版 WebView 解析 bug -
display: flex; justify-content: center; align-items: center—— 单靠其中任一只能单向居中 -
z-index: 9999—— 查过当前页面最高z-index（如 Ant Design 是 1000，Element Plus 是 2000），取明显更大值 -
background-color: rgba(0, 0, 0, 0.6)—— 别用opacity，否则内部按钮、图标也会变淡
弹窗内容本身怎么设才不翻车
弹窗是遮罩层的直接子元素，不用 position: absolute，也不用 transform 居中，靠父级 flex 规则“托”到正中间即可：
- 设
max-width: 500px或max-w-md（Tailwind），避免小屏溢出；搭配w-full实现自适应宽度 - 加
min-h-0（尤其在 Safari 中），防止 flex 子项不收缩导致内容撑高 - 若含长文本或代码块，加
overflow-y-auto和max-h-[80vh]，防止底部不可见 - 别给弹窗设
pointer-events: none—— 遮罩层要拦截点击，但弹窗内按钮、输入框必须能点，靠分层控制：.modal-overlay { pointer-events: auto; }，.modal-content { pointer-events: auto; }
移动端和 Safari 的几个硬坑
这些不是你写错了，是浏览器对视口单位的解释差异导致的：
- iOS Safari 软键盘弹出时，
100vh会按“可用视口”重算，可能变小 —— 优先用min-height: 100dvh，再 fallback 到min-height: 100vh - 遮罩激活时用户仍能滚动底层内容？加
body { overscroll-behavior: contain; } - 点击遮罩关闭弹窗，但点到弹窗内部也关了？监听时检查
e.target === e.currentTarget，或用捕获阶段：overlay.addEventListener('click', closeModal, true) - 某些安卓 WebView 下，
overflow: hidden会裁剪动画 —— 遮罩层别设这个
真正难的不是写几行 CSS，而是让遮罩在各种嵌套、滚动、缩放、键盘唤起场景下都不错位、不透底、不误关 —— 这些细节堆起来，才是生产可用的遮罩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
