迹忆客 专注技术分享

本文将讨论几种在 CSS 中水平居中 div 的方法。

在 CSS 中使用 margin 属性水平居中 div

使用 margin 属性，我们可以在 CSS 中水平居中一个 div。

margin 属性是设置元素所有四个方向的边距的简写。我们可以使用该属性将边距按顺序分配给 top、right、bottom 和 left。

我们可以使用左右边距的 auto 选项来水平居中 div。上边距和下边距可以设置为 0。

auto 选项会将元素放置在中心，然后等分左边距和右边距。我们应该为要居中的元素指定一个宽度。

元素将占据给定的宽度，剩余的水平空间将被左右平均分割。

让我们举个例子。如果元素的宽度为 50%，auto 属性将创建 25% 的左边距和 25% 的右边距。

我们还可以使用 display 属性将元素设置为 table。如果表格中有内容，则无需指定宽度。

使用内容的宽度。当我们没有在内部 div 中写入任何内容时，我们指定一定的宽度。

例如，在 HTML 中创建一个类名为 outerDiv 的 div。然后，在 HTML 中的 outerDiv 中嵌套另一个 innerDiv。

在 CSS 中，在 outerDiv 类中将 width 设置为 100% 并将 background 设置为 blue。接下来，选择 innerDiv 并将 display 属性设置为 table。

将其 background 设置为 red，height 和 width 设置为 10vh 和 10vw。最后，将 margin 设置为 0 auto。

这里，margin 属性中的 0 是顶部和底部的边距。auto 选项用于左右边距。我们可以使用 CSS 的 margin 属性将 div 水平居中。

示例代码：

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

.innerDiv {
    display: table;
    background:red;
    height:10vh;
    width:10vw;
    margin: 0 auto;
}
.outerDiv {
    width:100%;
    background:blue;
}

在 CSS 中使用 Flexbox 将 div 水平居中

我们可以使用 flexbox 属性在 CSS 中水平居中一个 div。

Flexbox 提供了一种将元素垂直和水平居中的简单方法。我们可以创建 flex 并定义元素在 flexbox 中的定位方式。

justify-content 属性可用于在内容未占用所有可用空间时指定内容在弹性框中的水平位置。我们可以在外部容器中创建一个 flexbox，并使用 justify-content 属性将内部容器的位置设置为中心。

例如，选择 innerDiv 类并将 height 和 width 属性设置为 10vh 和 10vw。将颜色黑色设置为背景颜色。接下来，选择 outerDiv 类并将 width 赋予 100%。

将其背景颜色设置为 100%。然后，通过将 display 属性设置为 flex 来创建容器一个 flexbox。之后，将选项 center 写入 justify-content 属性。

因此，我们可以使用 CSS Flexbox 在 CSS 中将 div 水平居中。

示例代码：

.innerDiv {
    background:black;
    height:10vh;
    width:10vw;
}
.outerDiv {
    width:100%;
    background:pink;
    display: flex;
    justify-content: center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

在 CSS 中将 div 设置为 inline-block 并使用 text-align 属性水平居中

在 CSS 中水平居中 div 的另一种方法是将 div 设置为 inline-block 元素。就像 inline 一样，inline-block 元素不会从新行开始。

但是，我们可以设置 width 和 height。然后，我们可以使用外部 div 中的 text-align 属性将内部 div 水平居中。

内部 div 继承了外部 div 的 text-align 属性，并且元素可以居中。

例如，按照上述方法为内部 div 设置一些高度、宽度和背景。然后，使用 display 属性将元素设置为 inline-block。

在外部 div 中，设置其宽度和背景。最后，将 text-align 属性设置为 center。

这样，我们可以在 CSS 中水平居中一个 div。

示例代码：

.innerDiv {
    background:red;
    height:10vh;
    width:10vw;
    display:inline-block;
}

.outerDiv {
    width:100%;
    background:blue;
    text-align:center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>