如何使用CSS的Flexbox属性使`div`居中

我们可以使用Flexbox的justify-content和align-items属性来居中一个div。它们因为响应式且易于使用而广受欢迎。在本文中，我们将学习如何使用Flexbox属性来居中div。

使用align-items和justify-content属性

使用Flexbox的最流行方法是结合justify-content和align-items属性。

justify-content属性可以水平居中对齐div。
align-items属性可以垂直居中对齐div。

如果您只想在一个方向上居中对齐，即垂直或水平方向上的其中一个，我们应该只使用上述属性中的一个。

使用align-items和justify-content属性来水平和垂直居中对齐子元素。

示例

<!DOCTYPE html>
<html lang="en">
<style>
   .parent{
      border: 2px solid green;
      height:30vh;
      width:30vw;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: orange;
   }
   .child{
      border: 2px solid red;
      height:10vh;
      width:10vw;
      background-color: yellow;
   }
</style>
</head>
<body>
   <div class="parent">
      <div class="child">
         This is the child element.
      </div>
   </div>
</body>
</html>

在代码中，父元素是一个高度为视口高度的30％，宽度为视口宽度的30％的、有绿色边框的橙色框。父元素通过“display: flex”，“flex-direction: row”，“justify-content: center”和“align-items: center”在水平和垂直方向上居中。
要使用align-items和justify-content属性，首先需要使用display属性声明元素为flexbox。子元素是一个高度为视口高度的10％，宽度为视口宽度的10％的、有红色边框的黄色框，放置在父元素内。