使用 CSS 垂直居中 div

1. 使用內部 div 中的 top 和 transform 屬性使用 CSS 使 div 垂直居中
2. 在 CSS 中使用 CSS Flexbox 垂直居中 div

本文將介紹在 CSS 中垂直居中 div 的方法。

使用內部 div 中的 top 和 transform 屬性使用 CSS 使 div 垂直居中

此方法使用兩個容器來演示如何垂直居中 div。

首先，我們可以建立一個外部和內部 div，我們將相對於外部 div 垂直居中內部 div。我們可以使用 CSS 屬性 transform 和 top 垂直居中內部 div。

top 屬性只設定定位元素的垂直位置。該屬性根據應用於元素的位置屬性表現出不同的行為。

例如，如果 position 設定為 relative，元素的頂部邊緣將從其正常位置向下或向上移動。transform 屬性採用多種值，而 translateY() 是我們將使用的值。

translateY() 函式將僅從 Y 軸平移元素。我們可以使用這兩個屬性垂直居中 div。

例如，在 HTML 中建立一個 div 元素並用另一個 div 元素將其包裹起來。在 CSS 中，選擇外部 div 並將 height、width 和 background-color 設定為 180px、300px 和 blue。

接下來，選擇內部 div 並將 position 屬性​​設定為 relative。然後，應用 red 作為 background-color 屬性，併為 div 設定 20px 高度，並使用 translateY(-50%) 作為 transform 屬性的值。

在下面的示例中，top 屬性的 50% 值會將內部 div 的頂部邊緣放置在外部 div 的垂直中間部分。但是，內部 div 沒有居中，因為它的 height 為 20px。

translateY(-50%) 值將使頂部邊緣向上移動其高度的 50%。由於負值，它將向上移動，這意味著 div 將向上移動 10px。這樣，內部 div 垂直居中。

示例程式碼：

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

在 CSS 中使用 CSS Flexbox 垂直居中 div

我們可以建立一個靈活的容器並使用 justify-content 和 align-items 屬性在 CSS 中垂直居中 div。我們可以使用 display 屬性將容器定義為 flexbox。

justify-content 屬性將水平對齊 flexbox 中的元素。它需要各種選項，如 flex-start、flex-end、center 等。

類似地，align-items 屬性將垂直放置 flexbox 內的元素。

例如，建立一個帶有 box 類的 div，並在其中建立另一個 div。在內部 div 中寫入一些文字。

在 CSS 中選擇 body 和 html 標籤並將高度設定為 100%。接下來，選擇 box 類並將其 height 設定為 100%。

將 background 設定為 red，將 display 屬性設定為 flex。最後，將值 center 設定為 justify-content 和 align-items 屬性。

下面的示例將垂直和水平居中 div 內的文字。我們只能在一個靈活的容器中使用這兩個屬性。

因此，我們可以使用 flexbox 將 div 居中。

示例程式碼：

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}