使用 CSS 垂直居中 div

Subodh Poudel 2023年2月20日 2021年12月20日
  1. 使用內部 div 中的 toptransform 屬性使用 CSS 使 div 垂直居中
  2. 在 CSS 中使用 CSS Flexbox 垂直居中 div
使用 CSS 垂直居中 div

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

使用內部 div 中的 toptransform 屬性使用 CSS 使 div 垂直居中

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

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

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

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

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

例如,在 HTML 中建立一個 div 元素並用另一個 div 元素將其包裹起來。在 CSS 中,選擇外部 div 並將 heightwidthbackground-color 設定為 180px300pxblue

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

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

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-contentalign-items 屬性在 CSS 中垂直居中 div。我們可以使用 display 屬性將容器定義為 flexbox。

justify-content 屬性將水平對齊 flexbox 中的元素。它需要各種選項,如 flex-startflex-endcenter 等。

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

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

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

background 設定為 red,將 display 屬性設定為 flex。最後,將值 center 設定為 justify-contentalign-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;
}
Subodh Poudel avatar Subodh Poudel avatar

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

相關文章 - CSS Alignment