如何使用 CSS Grid 居中

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

在本文中，我们将研究使用 CSS Grid 将 div 水平和垂直居中的四种方法。当然，这些定心技术可以用于任何类型的元素。

配置

让我们首先创建一个容器，其中包含一个简单的盒子元素，我们将使用它来演示这些居中方法。这是HTML：

<article>
  <div></div>
</article>

这是我们的起始 CSS：

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

在我们所有的示例中，我们将使用该display: grid属性。这将<article>元素建立为网格容器并为该容器生成块级网格。

现在，让我们看看使 div 居中的各种方法。

1. 使用 CSS Grid 和 place-self 将 div 居中

我最喜欢使用 Grid 使元素居中的方法是使用该place-self属性。（您可以在此处阅读更多相关信息。）

将我们的 div 居中就像这样简单：

article {
  display: grid;
}

div {
  place-self: center;
}

该place-self属性是align-self（垂直）和justify-self（水平）属性的简写（如果您只是沿一个轴居中，这很有用）。您可以在此 CodePen 演示中对它们进行试验。

使用place-self非常简单，这是一个明显的首选解决方案。但这并不是使用 Grid 使元素居中的唯一方法，所以现在让我们看看其他一些方法。

using 的一个优点place-self是它适用于居中的元素，这意味着您也可以使用它来居中同一容器中的其他元素。（尝试在 CodePen 演示中添加更多 div 元素，看看会发生什么。）

2. 使用 CSS Grid、justify-content 和 align-items 将 div 居中

现在让我们看看使用 Gridjustify-content和align-items使我们的 div 居中所涉及的内容。

该justify-content属性用于在项目未使用所有可用空间时水平对齐容器的项目。有很多方法可以设置justify-content属性，但这里我们只是将其设置为center.

就像justify-content属性一样，align-items属性用于对齐容器中的内容，但它垂直对齐内容而不是水平对齐。

让我们回到我们的测试 HTML 并将以下代码添加到父容器中：

article {
  display: grid;
  justify-content: center;
  align-items: center;
}

这种方法的一个明显优势是它涉及的代码更少，因为居中是由容器处理的。但在某些方面，通过其容器定位 div 也是不利的，因为容器中的任何其他元素也会受到影响。

3. 使用 CSS Grid 和 Auto Margins 将 div 居中

与往常一样，我们将使用display: grid. 我们还将使用 为 div 分配自动边距margin: auto。这使得浏览器自动计算子div周围的可用空间，并垂直和水平划分，将div放在中间：

article {
  display: grid;
}

div {
  margin: auto;
}

4. 使用 CSS Grid 和 place-items 将 Div 居中

该place-items属性用于在网格中垂直和水平对齐项目。通过像这样定位容器，它可以用来使我们的 div 居中：

article {
  display: grid;
  place-items: center;
}

与place-self属性一样，place-items是两个属性的简写，在本例中为justify-items(horizo​​ntal) 和align-items(vertical) 与 相比place-self，place-items应用于容器，这使其灵活性稍差。

结论

这些方法中的每一个都可以让您在容器中水平和垂直居中 div。正如我所说，我的首选是place-self方法，主要是因为它应用于居中的元素而不是容器。方法也是一样的margin: auto。但是，当然，如果您只想将元素集中在一个方向上，您也可以使用align-self或justify-self。