Skip to main content

[CSS] 垂直置中的方法

css

在學習網頁排版的過程中,置中(不論垂直或水平)一直是個相當麻煩的事,關於 CSS 中置中的方式,網路上可以找到非常多,這裡的整理算是我自己的一個筆記吧,如果內容有問題在麻煩告知。 以下是之後示範中 HTML Body 的部分:

<div class="outer">  <div class="inner">    <p>要置中的內容</p>  </div></div>

後面則是搭配上不同的 CSS 作為展示。

文字的垂直置中方法#

flex(推薦)#

Flex 在瀏覽器的支援度已經相當普及,除非有需要支援 IE 的使用,不然基本上都可以安心使用了,簡單好用:

邏輯:display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。

.outer {  background-color: #95afba;}.inner {  background-color: #d5e1a3;  display: flex; /* ★ */  height: 300px;  align-items: center; /* ★ */}

line-height(常用)#

很好用的方法,就是設定 div 的高度和文字高度一樣,就可以簡單達到垂直置中的效果。

邏輯:當 DIV 區塊的高度等同於文字行高的,文字就會被放在中間。

.outer {  background-color: #95afba;}.inner {  background-color: #d5e1a3;  height: 300px; /* ★ */  line-height: 300px; /* ★ */}

效果如下:

imgur

table(少用)#

邏輯:把要垂直置中的內容當作是 table 來操作,所以可以用 vertical-align 的指令。

.outer {  background-color: #95afba;  display: table; /* ★ */  height: 300px;}.inner {  background-color: #d5e1a3;  display: table-cell; /* ★ */  vertical-align: middle; /* ★ */}

inline-block + vertical-align(少用)#

透過這個方法,我們可以將多行文字也做一個垂直置中,這個方法也可以用來幫區塊作垂直置中:

.inner {  background-color: #95afba;  height: 400px;  font-size: 0;}.inner:before {  content: ''; /* ★ */  height: 100%; /* ★ */  display: inline-block; /* ★ */  vertical-align: middle; /* ★ */}p {  display: inline-block; /* ★ */  vertical-align: middle; /* ★ */  font-size: 1rem;}

padding#

在下面文章一起進行說明。

區塊(div)的垂直置中方法#

flex(建議)#

邏輯:display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。

.outer {  background-color: #95afba;  position: relative; /* ★ */  height: 400px;  display: flex; /* ★ */  align-items: center; /* ★ */}
.inner {  background-color: #d5e1a3;  height: 100px;}

Position + Transform(常用)#

這個方法是利用絕對定位 absolute 的方式,搭配上 transform 來操作。

這個想法的概念是這樣,首先先用 absolute 來做絕對定位,當我輸入 top: 50% 時,這個 <div> 的左上角,會被移到高度為 50% 的地方。

但這樣並沒有真的把 div 區塊置中,因為它超過了,所以我們需要搭配上 transform 的屬性,透過負值的方法把它往上調,而往上調的高度就是這個 div 元素高度的一半,所以使用 translate(-50%) ,這時候,這個 inner div 就會被垂直置中了。

邏輯:先利用 position: absolutetop: 50% 設在 50%;接著再透過 transform: translateY(-50%) 把超過的部分修正回來,達到垂直置中。

.outer {  background-color: #95afba;  position: relative; /* ★ */  height: 400px;}.inner {  background-color: #d5e1a3;  position: absolute; /* ★ */  top: 50%; /* ★ */  height: 100px;  transform: translateY(-50%); /* ★ */}

css

Position + Margin#

這個方法會設定 topbottom 的位置,讓它不可能符合,再透過 margin 的方式,讓它變成垂直置中。

這個方法同時設定 topbottom0,使得 inner div 完全不可能符合,最後再透過 margin 這個指令,讓它達到垂直置中的效果。

類似的方法,也可以讓它達到水平置中,只要在 inner 的地方,多加上left:0; right:0,就可以達到水平置中。

.outer {  background-color: #95afba;  position: relative; /* ★ */  height: 400px;}
.inner {  background-color: #d5e1a3;  height: 100px;  width: 100px;  position: absolute; /* ★ */  top: 0; /* ★ */  bottom: 0; /* ★ */  margin: auto; /* ★ */}

padding#

當我們的 div 沒有設定高度時,我們可以透過 padding 的指令來達到垂直置中的效果。

邏輯:透過上下都增加 100pxpadding 就可以,讓 inner 這個區塊達到垂直置中的效果。

inner 也可以透過加上 padding: 50px 0,這樣的方式,來達到裡面也垂直置中的效果,而且也可以達到文字的垂直置中。

.outer {  background-color: #95afba;  padding: 100px 0; /* 上下都增加 100px 的padding */}.inner {  background-color: #d5e1a3;  width: 100px;}

:before + inline-block(少用)#

這個方法,透過 CSS 當中的偽元素(:before)加上 inline-block 來達到這樣的效果。

想法:在 outer 的前面加上一個偽元素,同時要 inline-block 的方式來呈現,這樣就可以再透過vertical-align 來加以置中。

如果 inner 這個 div 想要水平置中的話,可以在 outer 的地方加上 text-align:center 就可以達到水平置中的效果了。

.outer {  background-color: #95afba;  height: 400px;  text-align: center; /* 如果要水平置中 */}
/* ★ */.outer:before {  content: '';  height: 100%;  display: inline-block;  vertical-align: middle;}
.inner {  background-color: #d5e1a3;  width: 100px;  height: 100px;  display: inline-block; /* ★ */  vertical-align: middle; /* ★ */}

參考資料#