在 CSS 中将 div 水平居中
-
在 CSS 中使用
margin
属性水平居中div
-
在 CSS 中使用 Flexbox 将
div
水平居中 -
在 CSS 中将
div
设置为inline-block
并使用text-align
属性水平居中
本文将讨论几种在 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>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn