在 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