CSS Grid 是一种用于构建网格布局的强大工具，它可以让我们轻松地实现各种布局需求，包括水平和垂直居中。在本文中，我们将介绍使用 CSS Grid 实现水平和垂直居中的方法和技巧，并提供示例代码。
方法一：使用 grid-template-areas
grid-template-areas 是 CSS Grid 中的一个非常有用的属性，它可以让我们通过定义网格区域来构建复杂的布局。要使用 grid-template-areas 实现水平和垂直居中，我们可以将网格区域分为四个部分：左上角、右上角、左下角和右下角。然后，我们可以将要居中的元素放置在中心的网格区域中。
<div class="container"> <div class="centered">Hello, world!</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
------- ------
--------------------
-- -- -- --
--- ------ ------ ---
-- -- -- ---
-
--------- -
---------- -------
------------- -------
----------- -------
-在上面的代码中，我们定义了一个名为 container 的容器，它使用 grid-template-areas 定义了一个四行四列的网格布局。我们将要居中的元素放置在了中心的网格区域中，并使用 justify-self 和 align-self 属性将其水平和垂直居中。
方法二：使用 grid-template-columns 和 grid-template-rows
除了使用 grid-template-areas，我们还可以使用 grid-template-columns 和 grid-template-rows 属性来实现水平和垂直居中。我们可以将容器分为三个部分：上部、中间和下部。然后，我们可以将要居中的元素放置在中间部分的中心。
<div class="container"> <div class="centered">Hello, world!</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ---------------------- --- ---- ---- ------------------- --- ---- ---- - --------- - ------------- ------- ----------- ------- -
在上面的代码中，我们定义了一个名为 container 的容器，它使用 grid-template-columns 和 grid-template-rows 定义了一个三行三列的网格布局。我们将要居中的元素放置在了中间部分的中心，并使用 justify-self 和 align-self 属性将其水平和垂直居中。
方法三：使用 justify-items 和 align-items
除了使用 grid-template-areas、grid-template-columns 和 grid-template-rows，我们还可以使用 justify-items 和 align-items 属性来实现水平和垂直居中。我们可以将容器的 display 属性设置为 flex，并使用 justify-content 和 align-items 属性将要居中的元素水平和垂直居中。
<div class="container"> <div class="centered">Hello, world!</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ---------------- ------- ------------ ------- - --------- - ------ ---- ------- ---- ----------------- ----- -
在上面的代码中，我们定义了一个名为 container 的容器，它使用 display: flex 属性将其变为了一个 flex 容器。我们将要居中的元素设置了宽度和高度，并使用 justify-content 和 align-items 属性将其水平和垂直居中。
结论
使用 CSS Grid 实现水平和垂直居中是一件非常简单的事情，我们可以使用 grid-template-areas、grid-template-columns 和 grid-template-rows、justify-items 和 align-items 等属性来实现。不同的方法适用于不同的布局需求，我们可以根据具体情况来选择使用哪种方法。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6763f05b856ee0c1d424cc8f