在现代 web 开发中，排版和布局一直是前端开发人员面临的一个挑战。幸运的是，随着 CSS Grid 的出现，灵活且强大的布局工具已经成为了我们的工具箱中的必备工具。
然而，对于一些刚开始使用 CSS Grid 的开发者，一些基本的任务，如在网格容器内水平和垂直居中对齐元素，可能会感到有些困难。在本文中，我们将讨论如何使用 CSS Grid 来实现网格内元素的居中对齐。
网格容器属性
在探讨网格元素居中对齐之前，让我们快速回顾一下网格容器的几个属性。
display: grid
首先，我们需要将父元素设置为一个网格容器，它最重要的属性之一就是 display: grid。
.container {
display: grid;
}grid-template-columns 和 grid-template-rows
然后我们需要定义网格容器的列和行，使网格元素可以在其中排布。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}这将把我们的容器分成三列，并设置行的高度相应的自适应。
实现垂直和水平居中
使用 Grid 中的 justify-items 和 align-items
我们可以使用 justify-items 和 align-items 属性将网格元素居中对齐。
justify-items 属性可以水平对齐网格元素，而 align-items 属性可以垂直对齐网格元素。我们可以将它们设置为 center，让网格元素居中对齐。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}使用网格线
我们可以使用网格线来实现水平和垂直居中。我们可以使用网格容器的 grid-template-rows 和 grid-template-columns 属性来定义网格线，然后将元素放置在网格线的交点上。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - ----- - ------------ - - -- --------- - - -- -
在这个例子中，我们将列分成了三部分，将行分成了两部分。我们使用 grid-column 和 grid-row 属性来确定 item 元素在哪个网格线的交点上，并将其放置。
我们将元素放置在了第 2 列，第 1 行的交点上。我们得到了一个水平和垂直居中的元素。
总结
在这篇文章中，我们学习了如何使用 CSS Grid 实现网格内元素的垂直和水平居中。我们探讨了两种方法，一种是使用 justify-items 和 align-items 属性，另一种是使用网格线。这些方法对于开发者来说都是非常简单且有用的。
希望这篇文章能够帮助到您，并且通过了解这些概念，您也能够更加自如地使用 CSS Grid 来创建您的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64640ebf968c7c53b04f9e9b