如何使用CSS Grid快速实现全屏响应式居中弹窗-css教程-PHP中文网

应将 display: grid 用于 .modal-content 子容器而非 .modal 遮罩层；遮罩层须用 position: fixed + inset: 0 + flex 居中，.modal-content 用 grid-template-rows: max-content 1fr max-content、max-height: 80vh 和 min-height: 0 确保结构稳定。

如何使用css grid快速实现全屏响应式居中弹窗

直接用 display: grid 给弹窗外层设居中，90% 的情况会失效——它不是不能居中，而是你没分清“定位”和“划分空间”的职责边界。

为什么 `.modal { display: grid }` 会导致弹窗错位或塌陷

Grid 不处理浮层定位逻辑，只负责容器内部轨道划分。把 display: grid 直接加在 .modal（即遮罩层）上，等于让它脱离文档流后还试图靠 Grid 自己撑高、居中，结果是：

iOS Safari 中内容区高度塌缩，1fr 算出 0px
键盘弹出时视口高度跳变，100vh 失准，弹窗贴顶或沉底
滚动背景时遮罩层不跟随，弹窗卡在初始位置
按钮组被挤出容器，grid-column: 1 / -1 失效

真正该用 Grid 的，是 .modal-content 这个子容器——它只管“标题/内容/按钮怎么分高度”，不管“弹窗在哪”。

`position: fixed + inset: 0` 是遮罩层唯一可靠锚定方式

必须写全这四条，缺一不可：

position: fixed：脱离文档流
inset: 0（等价于 top: 0; right: 0; bottom: 0; left: 0）：确保覆盖全屏，包括地址栏收起后的区域
display: flex：父级用 Flex 居中，比 transform: translate(-50%, -50%) 更稳定，缩放/键盘弹出时不抖动
justify-content: center; align-items: center：真二维居中，不依赖子元素尺寸

别再用 min-height: 100vh 或 height: 100% 去“凑”高度——它们在微信 X5、iOS 15.6 等环境下计算为 0，inset: 0 才是跨浏览器的硬性保障。

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

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

下载

`.modal-content` 用 Grid 划分结构的关键三步

这是唯一需要写 Grid 的地方，目标是让标题、正文、按钮三块自适应高度，且不随内容撑爆视口：

设 display: grid 和 grid-template-rows: max-content 1fr max-content：首尾用 max-content 固定高度，中间用 1fr 吃剩余空间
必须加 max-height: 80vh（不是 height: 80vh）：给 1fr 提供计算依据，否则它按无限高算，滚动失效
.modal-body 要同时设 overflow-y: auto 和 min-height: 0：前者启用滚动，后者防止内容少时高度塌缩（尤其 Safari 中常见）

示例结构：

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  max-height: 80vh;
  width: 90vw;
  max-width: 500px;
  background: white;
}

.modal-body {
  overflow-y: auto;
  min-height: 0;
}

移动端隐藏标题或按钮时，`display: none` 是唯一安全选项

用 visibility: hidden 或 opacity: 0 会保留对应 Grid 轨道占位，导致中间内容区变窄、按钮错位。而 display: none 会让 Grid 自动重排剩余轨道：

在 @media (max-width: 767px) 里直接写 .modal-header { display: none }
不要重写 grid-template-rows —— 漏掉 max-content 就会让 1fr 失去参照，高度失控
按钮组若需横跨全宽，给 .modal-footer 加 grid-column: 1 / -1，比 width: 100% 更稳，避免 Safari 渲染 bug