如何在CSS中使用Grid制作弹出框居中_grid-template-rows与align-items配合

在CSS布局中，让弹出框在视口中居中是一个高频需求，除了常用的flex布局和绝对定位方案，使用Grid布局配合grid-template-rows和align-items属性也能轻松实现这个效果，且逻辑更清晰，适配性更好。

相关属性基础说明

要实现弹出框居中，首先需要理解两个核心Grid属性的作用：

• grid-template-rows：用于定义Grid容器行轨道的大小，我们可以设置行轨道的分布规则，为后续对齐做准备。
• align-items：用于设置Grid容器内所有网格项在交叉轴（垂直方向）上的对齐方式，取值包括start、end、center等，center就是垂直居中对齐。

完整实现步骤

1. 搭建基础HTML结构

首先创建弹出框的基础结构，包含一个遮罩层和弹出框内容区域：

<div class="modal-mask">
  <div class="modal-content">
    <h3>提示信息</h3>
    <p>这是使用Grid布局实现的居中弹出框</p>
    <button class="close-btn">关闭</button>
  </div>
</div>

2. 编写Grid布局样式

给遮罩层设置Grid布局，通过grid-template-rows和align-items配合实现垂直居中，再结合justify-items实现水平居中：

/* 遮罩层样式，占满整个视口 */
.modal-mask {
  /* 设置为Grid容器 */
  display: grid;
  /* 定义行轨道：第一行占满所有可用空间 */
  grid-template-rows: 1fr;
  /* 垂直方向居中对齐网格项（弹出框） */
  align-items: center;
  /* 水平方向居中对齐网格项 */
  justify-items: center;
  /* 遮罩层占满整个视口 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 弹出框内容样式 */
.modal-content {
  width: 400px;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.close-btn {
  margin-top: 16px;
  padding: 8px 24px;
  background-color: #1677ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #4096ff;
}

3. 属性配合原理说明

这里的实现核心是grid-template-rows: 1fr的作用，它让遮罩层的行轨道只有一行，且这一行会占满整个遮罩层的高度。此时align-items: center会让作为网格项的弹出框，在这一行轨道内垂直居中对齐。

如果我们需要调整行轨道的分布，比如遮罩层上方留一部分空白，也可以修改grid-template-rows的值：

/* 第一行占20%空间，第二行占剩余空间，弹出框在第二行内垂直居中 */
grid-template-rows: 20% 1fr;

这种情况下，弹出框会在遮罩层下方80%的区域中垂直居中，灵活性更高。

不同场景适配方案

弹出框高度不固定场景

如果弹出框的内容高度不固定，上述方案依然生效，因为align-items是对网格项本身进行对齐，不需要预先知道弹出框的高度：

/* 动态内容的弹出框不需要额外修改样式 */
.modal-content {
  width: 400px;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  /* 不设置固定高度，内容撑开 */
}

多弹出框场景

如果同一个页面有多个弹出框需要居中，只需要给不同的遮罩层添加同一个Grid样式类即可，不需要重复编写居中逻辑：

<div class="modal-mask">
  <div class="modal-content">弹出框1内容</div>
</div>
<div class="modal-mask">
  <div class="modal-content">弹出框2内容</div>
</div>

方案优势总结

通过上述方法，我们可以快速使用Grid布局的grid-template-rows和align-items属性实现弹出框居中，这种方法不仅代码简洁，而且扩展性强，后续调整布局规则也非常方便，适合在各类前端项目中使用。

CSS_Gridgrid-template-rowsalign-items弹出框居中前端布局修改时间：2026-06-25 21:00:30