使用 CSS 垂直居中 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;
}
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