CSS如何实现移动端遮罩层居中_使用grid布局快速实现弹出框适配-css教程-PHP中文网

遮罩层容器必须用 position: fixed，内部弹窗居中用 display: grid；fixed 确保全屏覆盖不随滚动偏移，grid 实现语义化、无依赖、高性能居中，二者分工明确不可互替。

css如何实现移动端遮罩层居中_使用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 写错了，而是依赖了动态变化的视口单位。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

解决方案不是换布局方式，而是绕过 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 已不推荐。