在 CSS 中將 div 水平居中

1. 在 CSS 中使用 margin 屬性水平居中 div
2. 在 CSS 中使用 Flexbox 將 div 水平居中
3. 在 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>