使用Grid布局可通过设置父容器display: grid、grid-template-rows: 1fr auto 1fr和align-items: center，使弹出框在容器中垂直居中，结合justify-self: center实现水平居中，无需绝对定位或JavaScript，结构简洁且响应性强。
要在CSS中使用Grid让弹出框在容器中垂直居中，可以结合 grid-template-rows 与 align-items 属性实现。这种方式灵活且无需额外定位或JavaScript，适合现代布局需求。
将弹出框的外层容器设为 display: grid，然后通过 grid-template-rows 定义行的尺寸分布。比如你想让内容在垂直方向上居中，可以把容器分为三行：上下留空，中间放弹窗。
示例：
.modal-container {
display: grid;
grid-template-rows: 1fr auto 1fr; /* 上下各占1份空白，中间放内容 */
min-height: 100vh; /* 确保全屏高度 */
}
这样，auto 表示弹窗自身高度，上下两个 1fr 均分剩余空间，自然实现垂直居中效果。
虽然 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，保持其为普通网格项即可。
推荐做法：基本上就这些。用 grid-template-rows 分配空间，配合 align-items 精确控制对齐，就能轻松实现弹出框在页面中完美居中，结构清晰，维护方便。不复杂但容易忽略细节。
以上就是如何在CSS中使用Grid制作弹出框居中_grid-template-rows与align-items配合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
791
收藏
