在 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;
}
使用 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; 将圆与中心水平对齐。
以下是我们的圆位置：
如何使用 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;。
这是我们的圆的位置：
如何使用 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（垂直对齐）属性将圆定位在页面的中心。
这是我们圆的位置：
如何使用 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;
}
这次我们将代码写在 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;
}
我们只添加了 margin: 0 auto; 代码行到 circle 类中。
让我们看一下圆的位置：
如何使用 CSS text-align 属性使文本水平居中
在本节中，我们将了解如何使文本水平居中。
此方法仅在我们处理的文本是在一个元素中时才有效。
这是一个例子：
<div class="container">
<h1>Hello World!</h1>
</div>
在上面的示例中，我们创建了一个带有 container 类的 div 和一个带有一些文本的 h1 元素。这是它现在的样子：
让我们编写 CSS 代码：
.container {
width: 500px;
height: 250px;
margin: 50px;
outline: solid 1px black;
}
h1 {
text-align: center;
}
另外，为了将 h1 元素中的文本对齐到页面的中心，我们必须使用 text-align 属性，将其值设为 center。这是它现在在浏览器中的样子：
总结
在本文中，我们了解了如何使用 CSS 中的 Flexbox 和 margin 和 text-align 属性将元素水平、垂直和在页面中心居中。
在每个小节中，我们都看到了代码示例和代码功能的可视化表示。
祝你编码愉快！
