如何使用CSS网格属性居中`duiv`元素

CSS网格是CSS中最常用的元素之一。该元素类似于flexbox。CSS网格是Web上的二维布局系统。我们可以使用网格的帮助将元素放置在行、列或两者中。在本文中，我们将了解如何仅使用CSS网格属性来居中一个div元素。我们将使用place-items和align-items属性来实现相同的效果。

使用place-items属性

grid-container类将display属性设置为grid，以创建一个网格容器，将place-items属性设置为center，以将项目居中对齐在网格中间。内部的div将在网格容器内进行垂直和水平居中。

语法

.grid-container {
    display: grid;
    place-items: center;
}

在这里，我们使用display属性将HTML容器定义为网格元素。接下来，我们使用place-items属性来将网格居中对齐。请注意，place-item属性仅对网格元素起作用。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container{
         display: grid;
         place-items: center;
         border:2px solid black;
         width:50%;
      }
      body{
         display: grid;
         place-items: center;
      }
   </style>
</head>
<body>
   <div class="container">
      <p>This is the grid element</p>
   </div>
</body>
</html>

使用justify-items属性

在网格布局中，我们有多种选项来将div居中对齐。另一种居中div的方法是使用justify-items属性。

语法

<element selector>{
   display: grid;
   Justify-items: center{
}

在上面的语法中，我们使用display属性将HTML标签定义为一个网格元素，并使用justify-items进入div。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: grid;
         justify-items: center;
         border: 2px solid yellow;
         width:50%;
      }
      body {
         display: grid;
         place-items: center;
      }
   </style>
</head>
<body>
   <div class="container">
      <p>How to center align the grid element</p>
   </div>
</body>
</html>

说明

CSS样式将“.container”类的display属性设置为网格，其中的项目居中并带有2像素宽度的黄色实线边框。宽度设置为50％，以在父元素中使内容居中。
<body>元素将其display属性设置为网格，并使用place-items属性在页面中水平和垂直方向上居中内容。<div class="container">元素是包含居中文本“如何居中对齐网格元素。”的父元素。

使用self-align属性

另一个选择是使用self-align属性。我们有align-self和justify-self属性来实现div的居中对齐。

语法

<parent element selector>{
   display: grid;
}
<child element selector>{
   align-self: center;
   justify-self: center;
}

首先，我们选择目标的父元素。我们将父元素定义为网格元素。接下来，我们选择目标的子元素。我们使用align-self和justify-self属性将网格设置为居中对齐。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: grid;
         width: 50%;
         border: 2px solid purple;
         height: 5vh;
      }
      .child {
         align-self: center;
         justify-self: center;
      }
      body {
         padding: 5vh;
         display: grid;
         place-items: center;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="child">Placing the child div to center</div>
   </div>
</body>
</html>

头部部分包括页面的CSS样式。 .container类将显示设置为网格，justify-items为center，并使用黄色边框设置宽度为50％。
body元素设置为显示为网格，并使用place-items在水平和垂直方向上居中内容。具有”class =” container “的div元素作为父元素，包含文本”如何居中对齐网格元素”，该文本将在其中水平居中。