CSS Grid 是一种用于布局网页的强大工具，它可以轻松地实现复杂的网格布局。除此之外，CSS Grid 还可以用来实现水平垂直居中的方式，让我们的网页布局更加美观和优雅。
实现方式
在 CSS Grid 中，我们可以使用 justify-content 和 align-items 属性来分别控制元素在水平和垂直方向上的对齐方式。通过将这两个属性的值设置为 center，我们可以实现元素在容器中的水平垂直居中。
下面是示例代码：
<div class="container"> <div class="content">Hello, World!</div> </div>
// www.javascriptcn.com code example
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
padding: 20px;
background-color: #eee;
}在上面的代码中，我们将 .container 元素的 display 属性设置为 grid，并将 justify-content 和 align-items 属性的值都设置为 center，这样就可以实现容器和其中的内容都在水平和垂直方向上居中显示。而 height: 100vh 则是为了让容器占据整个视口的高度。
深度学习
除了基本的水平垂直居中方式外，CSS Grid 还有其他一些可以实现水平垂直居中的方式。
使用 grid-template-areas
在 CSS Grid 中，我们可以使用 grid-template-areas 属性来定义网格模板。通过在模板中定义一个名为 center 的区域，并将元素放置在该区域内，我们可以实现元素在容器中的水平垂直居中。
下面是示例代码：
<div class="container"> <div class="content" style="grid-area: center;">Hello, World!</div> </div>
// www.javascriptcn.com code example
.container {
display: grid;
grid-template-areas: "center";
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
padding: 20px;
background-color: #eee;
}在上面的代码中，我们通过在 .container 元素的 grid-template-areas 属性中定义一个名为 center 的区域，并将 .content 元素的 grid-area 属性设置为 center，来实现元素在容器中的水平垂直居中。
使用 grid-auto-flow
在 CSS Grid 中，我们可以使用 grid-auto-flow 属性来控制网格单元格的流动方式。通过将其值设置为 column，我们可以让元素在容器中垂直排列，然后再将 justify-content 和 align-items 属性的值都设置为 center，就可以实现元素在容器中的水平垂直居中。
下面是示例代码：
<div class="container"> <div class="content">Hello, World!</div> </div>
// www.javascriptcn.com code example
.container {
display: grid;
grid-auto-flow: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
padding: 20px;
background-color: #eee;
}在上面的代码中，我们通过将 .container 元素的 grid-auto-flow 属性设置为 column，来让元素在容器中垂直排列。然后再将 justify-content 和 align-items 属性的值都设置为 center，来实现元素在容器中的水平垂直居中。
指导意义
CSS Grid 是一种强大的网页布局工具，它可以帮助我们实现复杂的网格布局和水平垂直居中的方式。通过学习和掌握 CSS Grid，我们可以让我们的网页布局更加美观和优雅，提高用户体验和页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d12325a941bf713426844d