使用 CSS 居中元素的 4 种不同方法

当我们创建一个网页时，我们很可能遇到过将元素居中的问题。那么让我们来看看使用 CSS 将元素居中的 4 种不同方式：

1. 使用 Flex
2. 保证金财产
3. 网格属性
4. 绝对属性

现在让我们通过示例来看看这些各自的属性是如何工作的。

HTML代码：

文件名：index.html

HTML

  

    
    

  

    

        

            This element is centered
        
    

  

在上面的代码中，我们创建了一个父 div 和一个子 div。我们将看看如何将子 div 居中放置在父 div 中。一个名为styles.css 的样式表已链接到我们定义父和子div 样式的文件。

文件名：styles.css

CSS

.parent {
  height: 400px;
  width: 400px;
  background-color: red;
}
.child {
  height: 100px;
  width: 100px;
  background-color: blue;
}

方法 1：使用 Flex我们可以使用Flexbox来使元素居中。我们可以将父 div 的显示属性设置为 flex，并且可以使用justify-context : center (水平)和align-items : center (垂直)属性轻松地将子 div 居中。

CSS

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法 2：Margin 属性另一种简单的方法是将子 div 居中，将其边距设置为 auto 并使父 div 显示为网格。

CSS

.parent {
  display: grid;
}
.child {
  margin: auto;
}

方法 3：网格属性使元素居中的一个非常简单的方法是使用父 div 上的网格属性并设置 place-items: center 。

CSS

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

方法四：绝对属性我们也可以使用位置属性来居中元素。

CSS

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

输出：

所有这些方式的输出将是相同的，如下所示：