CSS Grid 布局是一种强大的布局技术，它允许你以网格的形式来布局网页。除此之外，CSS Grid 布局还可以很容易地实现绝对定位元素的居中对齐。在本文中，我们将探讨如何使用 CSS Grid 布局来实现绝对定位元素的居中对齐。
使用 Grid 布局
首先，我们需要使用 display: grid 来创建一个网格。在这个网格中，我们可以定义多个行和列。可以通过 grid-template-rows 和 grid-template-columns 来设置网格的行和列大小。如下所示：
.container {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
height: 100vh;
}在上面的代码中，我们创建了一个 div，类名为 container。我们将这个 div 转换成网格布局，并将其高度设置为 100vh。
现在，我们需要在网格中插入我们的绝对定位元素。我们可以使用 grid-area 属性给元素设置一个在网格中的区域：
.elem {
grid-area: 1 / 1 / 2 / 2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}在上面的代码中，我们创建了一个类名为 elem 的元素，并用 grid-area 属性将它放置到网格的第一行第一列。为了实现水平和垂直居中，我们使用了 position: absolute，并将 top 和 left 值都设置为 50%。同时，我们使用 transform 属性将元素向上移动了它自身高度和向左移动了它自身宽度的一半。
现在我们可以在 HTML 中插入我们的 container 和 elem，并预览布局效果：
<div class="container"> <div class="elem">Hello,world!</div> </div>
如果你打开浏览器，并检查页面布局，你将会看到 elem 元素已经水平和垂直居中了。
总结
在本文中，我们学习了如何使用 CSS Grid 布局来实现绝对定位元素的居中对齐。我们使用 display: grid，grid-template-rows 和 grid-template-columns 创建了一个网格，并使用 grid-area 将元素放置在网格中。通过 position: absolute 和 transform，我们得以实现水平和垂直居中。这是一个简单却强大的技术，可以帮助开发者更好地控制网页布局。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----------- --------------
-------
---------- -
-------- -----
------------------- ----
---------------------- ----
------- ------
----------------- --------
-
----- -
---------- - - - - - - --
--------- ---------
---- ----
----- ----
------ --------
---------- --------------- ------
-
--------
-------
------
---- ------------------
---- -------------------- -- --- ---- ------------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0733ff6b2d6eab3b887da