原文：How to Center a Div with CSS，作者：Ihechikara Vincent Abba

当你开始通过构建项目练习学到的知识时，你可能会遇到一些常见的编程问题。

作为 Web 开发人员，你会遇到的一个常见问题是如何将元素放置在页面的中心或作为其容器的元素中心。如何使 div 居中，是一个无处不在的问题。

在本文中，我们将了解如何使用各种 CSS 属性使元素居中。我们将在每个部分中看到代码示例以及所有示例中元素的可视化表示。

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

在本节中，我们将了解如何使用 CSS Flexbox 属性将元素水平、垂直以及页面/容器的中心居中。

如果您愿意，可以使用图像，但我们将只使用用 CSS 绘制的简单圆圈。这是代码：

<div class="container">

      <div class="circle">

      </div>

</div>
.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}
Screenshot--276-

使用 Flexbox 定位需要我们在父元素或容器元素的类中编写代码。

如何使用 Flexbox 使 div 水平居中

现在我们将编写代码使 div 元素水平居中。我们仍在使用我们在上面创建的圆圈。

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

我们添加了两行代码来使圆水平居中。这些是我们添加的行：

display: flex;
justify-content: center;

display: flex; 允许我们使用 Flexbox 以及它的属性，justify-content: center; 将圆水平居中。

这是圆的位置：

Screenshot--278-

如何使用 Flexbox 使 div 垂直居中

我们将在本节中所做的与上一节类似，除了一行代码：

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

在这个例子中，我们使用了 align-items: center; 使圆垂直居中。回想一下，我们需要在指定方向之前先写 display: flex;。

这是圆的位置：

Screenshot--280-

如何使用 Flexbox 将 div 定位在中心

在本节中，我们将使用 CSS Flexbox 的水平和垂直对齐属性将圆定位在页面的中心，就是这样：

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

下面是我们在上面的容器类中添加的三行代码：

display: flex;
justify-content: center;
align-items: center;

正如预期的那样，我们从 display: flex; 开始，这允许我们在 CSS 中使用 Flexbox。然后，我们使用 justify-content（水平对齐）和 align-items（垂直对齐）属性将圆定位在页面的中心。

这是圆的位置：

Screenshot--282-

如何使用 CSS margin 属性将 div 水平居中

在本节中，我们将使用 margin 属性来水平居中我们的圆。

让我们再次创建一个圆。

<div class="container">

      <div class="circle">

      </div>

</div>
.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}
Screenshot--276-

这次我们将在 circle 类中编写代码，就是这样：

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
}

我们在 circle 类中添加的只是 margin: 0 auto; 这一行。

我们来看看圆的位置：

Screenshot--278--1

如何使用 CSS text-align 属性水平居中文本

在本节中，我们将了解如何将文本水平居中。

此方法仅在我们处理写入元素中的文本时才有效。

这是一个例子：

<div class="container">

    <h1>Hello World!</h1>
      
</div>

在上面的示例中，我们创建了一个带有容器类的 div 和一个带有一些文本的 h1 元素。这是它目前的样子：

Screenshot--272-

这是 CSS 代码：

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

h1 {
  text-align: center;
}

为了在页面中心对齐 h1 元素中的文本，我们必须使用 text-align 属性，将其值设为 center。这是它现在在浏览器中的样子：

Screenshot--274-

总结

在本文中，我们看到了如何使用 Flexbox 以及 CSS 中的 margin 和 text-align 属性水平、垂直和在页面中心居中元素。

在每个部分中，我们都看到了代码示例和代码功能的可视化表示。

祝你编程愉快！