CSS教程：怎么让div居中显示

有一些常见的编码问题您可能会遇到当你开始练习你所学到的建设项目。

一个常见的问题你将面对作为一个web开发人员是如何将一个元素在页面的中心或在一个元素作为它的容器。它是无处不在的“我怎么中心一个div ?”的问题。

在本文中,我们将看到如何中心元素使用不同的CSS属性。每一节中我们将看到代码示例和可视化表示元素的所有的例子。

如何使用CSS中心一个Div Flexbox

在本节中,我们将看到如何使用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;
}

定位与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;

显示:flex;允许我们使用Flexbox和它的属性,而justify-content:中心;水平对齐圆中心。

这是我们的位置循环:

如何使用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;
}

在这个例子中,我们使用对齐项目:中心;中心圆垂直。回想一下,我们被要求写显示:flex;先指定的方向。

这是我们的圆的位置:

如何定位一个Div中心使用Flexbox

在本节中,我们将在页面的中心位置圆使用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;

正如所料,我们首先显示:flex;它允许我们使用Flexbox CSS。我们然后使用justify-content水平对齐,对齐项目(垂直对齐)属性位置圆的中心页面。

这是我们的位置循环:

如何使用CSS保证金水平中心一个Div财产吗

在本节中,我们将使用保证金财产中心水平圆。

让我们创建我们的圆。

<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;
}

这一次我们将圆类中编写代码。方法如下:

.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;
}

我们已经添加了保证金:0汽车;行代码圆类。

让我们看一看圆的位置:

如何使用CSS文本水平居中text-align财产吗

在本节中,我们将看到如何使文字水平居中。

这种方法只能当我们正在与文字写在一个元素。

这是一个例子:

<div class="container">
    <h1>Hello World!</h1>      
</div>

在上面的示例中,我们创建了一个类的div容器和一个h1元素和一些文本。这是此刻的样子:

让我们编写CSS代码。

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

在其他一致h1元素中的文本在页面的中心,我们不得不使用text-align属性,给它一个中心的价值。这就是它看起来像现在在浏览器中:

结论

在本文中,我们看到了如何中心元素水平,垂直,在页面的中心使用Flexbox保证金和text-align CSS属性。