CSS Grid 是一个强大的前端工具，可以将页面布局纵横交错的动态网格，让页面元素进行精准的定位和排列，解决了传统布局方式无法进行自由调整的弊端。而在 CSS Grid 中，垂直居中是一个非常常见的需求，在本篇文章中，我们将探讨如何在 CSS Grid 的网格元素中实现垂直居中。
实现方式
在传统布局中，我们可以使用 margin、padding 或者 position 属性实现元素的垂直居中，但是在 CSS Grid 中，这些属性的表现并不完美，我们需要使用新的属性来实现垂直居中。
在 CSS Grid 中，垂直居中的实现方式有两种：使用 display:flex 和 grid-template-rows 属性。
使用 display:flex
首先，我们需要在 CSS 样式表中设置布局容器的 display 属性为 flex，接着将 align-items 属性设置为 center，即可实现元素的垂直居中。
.container {
display: flex;
align-items: center;
}使用 grid-template-rows
另外一种实现方式是使用 grid-template-rows 属性，将容器的高度设置为 100% 或者指定具体的高度值，然后在网格元素的 grid-row 属性中设置代码如下所示。
.container {
display: grid;
grid-template-rows: 100px auto 100px;
}
.item {
grid-row: 2 / 3;
}这里的 2 / 3 意思是将元素放置在第二行，会占据第二行的所有空间。
这两种方式的实现效果是一样的，都可以让元素在垂直方向上居中对齐。
示例代码
下面，我们来看一个简单的例子，在一个有两列和三行的网格布局中，如何实现垂直居中。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ------- ------ - ----- - -------- ----- ------------ ------- ---------------- ------- ----------------- -------- -
这里将容器的高度设置为 100vh，表示占满整个视口，便于观察垂直居中的效果。将网格布局设置为 2 列和 3 行，然后设置网格元素的背景色为灰色，方便观察。
最后，将网格元素的 display 属性设置为 flex，align-items 属性设置为 center，即可让元素在垂直方向上居中。
总结
通过本篇文章的介绍，相信你已经掌握了在 CSS Grid 中实现网格元素的垂直居中。虽然实现方式比传统布局更加复杂，但是它给我们带来了更加灵活的布局方式和更好的用户体验，值得我们使用和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647be594968c7c53b07296c3