CSS Grid 是一种强大的布局工具，它可以帮助我们轻松地实现复杂的布局效果。在本文中，我们将介绍如何使用 CSS Grid 实现水平垂直居中的小技巧。
实现水平垂直居中
在 CSS Grid 中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如，以下代码定义了一个包含两行两列的网格：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}要将一个元素水平垂直居中，我们可以将其放置在网格的中心位置。为此，我们可以使用 grid-column 和 grid-row 属性来指定元素所占据的列和行。例如，以下代码将一个元素放置在网格的第二列第二行：
.center {
grid-column: 2;
grid-row: 2;
}这将使元素位于网格的中心位置。但是，这并不会使元素水平垂直居中。要实现水平垂直居中，我们需要将元素的宽度和高度设置为固定值，并使用 margin 属性将其水平和垂直居中。例如，以下代码将一个宽度为 200px、高度为 100px 的元素水平垂直居中：
.center {
grid-column: 2;
grid-row: 2;
width: 200px;
height: 100px;
margin: auto;
}这将使元素水平垂直居中。但是，这种方法有一个缺点，即当我们改变元素的宽度和高度时，元素将不再水平垂直居中。为了解决这个问题，我们可以使用一个小技巧。
使用自动布局
在 CSS Grid 中，我们可以使用 grid-auto-flow 属性来指定未被显式指定的网格项的布局方式。默认情况下，grid-auto-flow 的值为 row，这意味着未被显式指定的网格项将按行排列。但是，我们可以将其设置为 column，这将使未被显式指定的网格项按列排列。
例如，以下代码将 grid-auto-flow 设置为 column：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
}现在，我们可以将一个元素放置在网格的中心位置，并使用 margin 属性将其水平和垂直居中。例如，以下代码将一个宽度为 200px、高度为 100px 的元素水平垂直居中：
.center {
grid-column: 2;
grid-row: 2;
width: 200px;
height: 100px;
margin: auto;
}这将使元素水平垂直居中，并且当我们改变元素的宽度和高度时，元素仍然保持水平垂直居中。
示例代码
以下是一个完整的示例代码，演示了如何使用 CSS Grid 实现水平垂直居中：
-- -------------------- ---- ------- ---- ------------- ---- --------------------- ------ ------- ----- - -------- ----- ---------------------- --- ---- ------------------- --- ---- --------------- ------- ------- ------ - ------- - ------------ -- --------- -- ------ ------ ------- ------ ----------------- ----- ------- ----- - --------
总结
CSS Grid 是一种强大的布局工具，它可以帮助我们轻松地实现复杂的布局效果。在本文中，我们介绍了如何使用 CSS Grid 实现水平垂直居中的小技巧。我们学习了如何使用 grid-template-columns 和 grid-template-rows 属性定义网格的列和行，如何使用 grid-column 和 grid-row 属性将元素放置在网格的中心位置，并如何使用 margin 属性将元素水平垂直居中。最后，我们介绍了一个小技巧，即使用 grid-auto-flow 属性和自动布局来实现元素的水平垂直居中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513b48495b1f8cacdc2395e