使用Grid布局可通过设置父容器display: grid、grid-template-rows: 1fr auto 1fr和align-items: center，使弹出框在容器中垂直居中，结合justify-self: center实现水平居中，无需绝对定位或JavaScript，结构简洁且响应性强。
要在CSS中使用Grid让弹出框在容器中垂直居中，可以结合 grid-template-rows 与 align-items 属性实现。这种方式灵活且无需额外定位或JavaScript，适合现代布局需求。
设置父容器为Grid并定义行结构
将弹出框的外层容器设为 display: grid，然后通过 grid-template-rows 定义行的尺寸分布。比如你想让内容在垂直方向上居中，可以把容器分为三行：上下留空，中间放弹窗。
示例：.modal-container {
display: grid;
grid-template-rows: 1fr auto 1fr; /* 上下各占1份空白，中间放内容 */
min-height: 100vh; /* 确保全屏高度 */
}
这样，auto 表示弹窗自身高度，上下两个 1fr 均分剩余空间，自然实现垂直居中效果。
使用align-items强化对齐行为
虽然 grid-template-rows 已经能实现居中，但你可以加上 align-items: center 来进一步确保网格内项目在交叉轴（这里是垂直方向）上居中对齐。
立即学习“前端免费学习笔记（深入）”；
注意：
在行方向使用 grid-template-rows 时，align-items 控制的是每一行内项目的垂直对齐方式。如果你的弹窗是唯一的子元素，这个属性会直接让它在中间行中垂直居中。
.modal-container {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center; /* 垂直居中对齐 */
min-height: 100vh;
}
弹窗本身的设置建议
确保弹窗元素没有脱离这种布局逻辑。一般不需要额外设置 margin 或 position，保持其为普通网格项即可。
推荐做法：- 弹窗宽度固定或最大宽度限制，例如 max-width: 500px
- 设置 justify-self: center 实现水平居中
- 避免使用 position: absolute，以免脱离Grid流
基本上就这些。用 grid-template-rows 分配空间，配合 align-items 精确控制对齐，就能轻松实现弹出框在页面中完美居中，结构清晰，维护方便。不复杂但容易忽略细节。
