如何使用 CSS 网格使 Div 居中

kazi02

在本文中，我们将介绍使用 CSS 网格使 div 水平和垂直居中的五种方法。当然，这些居中技术可以用于任何类型的元素。我们还介绍了如何使用Flexbox水平和垂直居中元素以及如何使用 Transforms 定位。 Backward Skip 10s Play Video Forward Skip 10s 配置 首先，我们创建一个容器，其中包含一个简单的框元素，我们将用它来演示这些居中方法。这是这是我们的起始Learn to Code with JavaScript 我们的起始位置，黄色方块位于黑色容器的左上角 在我们所有的示例中，我们将使用该display: grid属性。这会将<article>元素建立为网格容器并为该容器生成块级网格。我们将网格容器设置为宽 ( width: 100%) 和高以便有足够的空间供我们的 div 移动。


（如果您想尝试一下，这里是CodePen 上的演示模板。现在，让我们看看使 div 居中的各种方法。 1. 使用 CSS Grid 和 place-self 将 Div 居中 该place-self属性提供了一种将网格项目水平和垂直居中的简单方法。它用于将 印度手机号码列表 网格项置于其网格单元的中心（假设网格单元比网格项更宽更高，在我们的示例中就是如此）。 将 div 居中就这么简该属性是（水平）和（垂直）属性place-self的简写。您可以在此 CodePen 演示中尝试它们。justify-selfalign-self Learn to Code with JavaScript 使用place-self对于将网格中的各个项目居中特别有用，因为它使其他网格项目可以自由地进行不同的定位。但这并不是使用 Grid 将元素居中的唯一方法，所以现在让我们看看其他一些方法。



使用 CSS 网格和放置项将 Div 居中 现在让我们看看使用 Grid 来place-items使 div 居中涉及到什么。 该属性是（水平）和（垂直）place-items的简写。这些属性应用于网格容器而不是每个网格项，当我们希望所有网格项具有相同的位置时非常有用。（您可以在此 CodePen 演示中尝试它们。）justify-itemsalign-items 让我们返回到测试 CSS 并将以下代码添加到父容器作为实验，我们可以向上面的 将在其网格单元内水平和垂直居中，如下图所示（通过浏览器的网格检查器）。 现在容器中显示了三个 div，每个 div 都以其自己的网格单元为中心. 将具有位置内容的 Div 居中 该属性是（水平）和（垂直）place-content的简写。