遮罩层容器必须用 position: fixed，内部弹窗居中用 display: grid；fixed 确保全屏覆盖不随滚动偏移，grid 实现语义化、无依赖、高性能居中，二者分工明确不可互替。
遮罩层用 position: fixed 还是 display: grid？
直接说结论：遮罩层容器必须用 position: fixed，但内部弹出框的居中逻辑交给 grid —— 两者不是二选一，而是分工明确。用纯 grid 替代 fixed 会导致无法覆盖滚动内容、键盘弹起后错位、iOS Safari 滚动穿透等问题。
常见错误是把整个遮罩写成 display: grid + height: 100vh，结果页面一滚动，弹窗就卡在视口顶部不动了；或者用 min-height: 100vh 却没处理 body 滚动锁定，用户还能拖动背景。
-
position: fixed确保遮罩层脱离文档流、覆盖全屏、不随滚动偏移 -
display: grid只用于其子元素（即弹窗本身）的垂直+水平居中，语义清晰、代码少、无 hack - 必须配合
top: 0; left: 0; width: 100%; height: 100%才能撑满视口
Grid 居中弹窗的最小可行写法
不用 align-items + justify-content 套娃，也不用 place-items 玩缩写 —— 就两行关键声明，兼容 iOS 12+ 和安卓 Chrome：
mask {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
display: grid;
place-items: center; /* 等价于 align-items: center; justify-content: center */
}注意：place-items 在 Safari 15.4+ 才完全稳定，如果要支持更老版本，拆成两行更稳妥：
立即学习“前端免费学习笔记（深入）”；
mask {
align-items: center;
justify-content: center;
}- 父容器（遮罩）必须设
display: grid，子元素（弹窗）不需要任何定位或 margin - 弹窗自身建议设
max-width: 90%和width: fit-content，避免在小屏上溢出 - 别给弹窗设
margin: auto—— grid 下无效，还容易和 flex 混淆
移动端键盘弹出时遮罩层被顶起怎么办？
这是 iOS Safari 的经典问题：软键盘呼出 → 视口高度压缩 → 100vh 变小 → 遮罩层“上浮”，弹窗悬在半空。根本原因不是 grid 写错了，而是依赖了动态变化的视口单位。
解决方案不是换布局方式，而是绕过 vh：
- 遮罩层高度改用
min-height: 100%;+height: -webkit-fill-available;（iOS 专用） - 同时确保
html, body { height: 100%; }，否则100%会失效 - 更稳的做法：监听
resize事件，用 JS 动态设置style.height = window.innerHeight + 'px'，并在focusin时强制更新一次
别碰 viewport 的 height=device-height，它会让 zoom 失效，且现代 iOS 已不推荐。
为什么不能只靠 transform: translate(-50%, -50%)？
因为要适配各种屏幕尺寸和输入法状态，transform 居中需要精确知道弹窗宽高，而移动端弹窗内容常为动态文本或图片，offsetWidth 在渲染完成前不可靠；CSS 中又没法用 calc() 反推自身尺寸。
相比之下，grid 的 place-items 是基于容器空间自动计算的，不依赖子元素尺寸，也不触发重排 —— 性能更好，代码更健壮。
- 用
transform时，若弹窗内有textarea且获得焦点，iOS 键盘顶起后top/left值不会自动更新，必须手动修正 -
grid方案下，只要容器高度正确，居中逻辑天然跟随变化，无需额外监听 - Android WebView 对
transform的渲染一致性不如 grid，尤其在折叠屏或分屏模式下
真正难的不是怎么写居中，而是怎么让遮罩层在键盘进出、横竖屏切换、缩放、多窗口等真实场景下不崩 —— 这些细节比布局语法重要得多。
