如何使用 CSS 网格使 Div 居中

DigvijayDD

在本文中，我们将介绍使用 CSS 网格使 div 水平和垂直居中的五种方法。当然，这些居中技术可以用于任何类型的元素。我们还介绍了如何使用Flexbox水平和垂直居中元素以及如何使用 Transforms 定位。 P 我们的起始位置，黄色方块位于黑色容器的左上角 在我们所有的示例中，我们将使用该display: grid属性。这会将<article>元素建立为网格容器并为该容器生成块级网格。我们将网格容器设置为宽 ( width: 100%) 和高 ( min-height: 100vw)，以便有足够的空间供我们的 div 移动。（如果您想尝试一下，这里是CodePen 上的演示模板。） 现在，让我们看看使 div 居中的各种方法。 1. 使用 CSS Grid 和 place-self 将 Div 居中 该place-self属性提供了一种将网格项目水平和垂直居中的简单方法。它用于将网格项置于其网格单元的中心（假设网格单元比网格项更宽更高，在我们的示例中就是如此）。 将 div 居中就这么简单： article { display: grid; } div { place-self: center; } 该属性是（水平）和（垂直）属性place-self的简写。


您可以在此 CodePen 演示中尝试它们。justify-selfalign-self Learn to Code with JavaScript 使用place-self对于将网格中 电话号码列表  的各个项目居中特别有用，因为它使其他网格项目可以自由地进行不同的定位。但这并不是使用 Grid 将元素居中的唯一方法，所以现在让我们看看其他一些方法。 2. 使用 CSS 网格和放置项将 Div 居中 现在让我们看看使用 Grid 来place-items使 div 居中涉及到什么。 该属性是（水平）和（垂直）place-items的简写。这些属性应用于网格容器而不是每个网格项，当我们希望所有网格项具有相同的位置时非常有用。（您可以在此 CodePen 演示中尝试它们。）justify-itemsalign-items 让我们返回到测试 CSS 并将以下代码添加到父容器中：为实验，我们可以向上面的 CodePen 演示添加更多 div 元素，看看会发生什么。每个 div 将在其网格单元内水平和垂直居中，如下图所示（通过浏览器的网格检查器）。




现在容器中显示了三个 div，每个 div 都以其自己的网格单元为中心 Learn to Code with JavaScript 3. 将具有位置内容的 Div 居中 该属性是（水平）和（垂直）place-content的简写。虽然和控制网格项如何放置在其指定的网格单元中，但指定网格容器的整个内容应如何对齐（即，所有网格项被视为一组）。在我们的演示中，只有一个网格项（我们的单个黄色 div），因此我们也可以将其置于容器的中心。justify-contentalign-contentplace-selfplace-itemsplace-contentplace-content 让我们更新测试 CSS 并将以下代码添加到父容器中： article { display: grid; place-content: center; } 如下所示，我们的 div 再次位于其容器的中心。 这里有几点需要注意。首先，在迄今为止的所有示例中，我们都使用了 的值center（出​​于显而易见的原因）。但到目前为止，我们探索的每个属性都具有用于放置物品的各种其他值。的值有很多place-content（您可以在 MDN 上阅读），另外两个值也可用于居中我们的 div:space-around和space-evenly。center尝试在上面的笔中替换这些值。 此外，在我们将 div 置于容器中心的简单示例中，我们甚至可以混合和匹配上面看到的属性。我们可以使用justify-content和align-items来居中我们的 div，如本演示所示。