難道沒有個好辦法可以垂直置中嗎?

這真的是目前網頁前端中最惱人的問題了QQ 一直以來都沒有一個最佳解法,以下列出四種自己常用的解法:

1. padding

<div class="wrapper">
    <h2>把我垂直置中</h2>
</div>

這方法就在父元素的 .wrapper 加入上下的 padding ,就能讓視覺效果是垂直置中啦XD 雖然並不是真的做到垂直置中,但呈現出來的效果是一樣的。


2. absolute

外面灰框是一個 400 ✕ 300 的父元素,中間包著一個 100 ✕ 100 的方形元素

首先將外層父元素設定為 position: relative,那裡面的粉色方形呢?

div {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

先是 top: 50% 把這個方型推到父元素的一半一下,這時的第三行 margin-top: -50px; 就是在把這個方型再次往上回推自己的一半,如此一來就可以達到垂直置中的結果!

有點複雜,剛看到的時候也不是很懂,但這可以用在什麼情況呢?

1) 因為是推到父元素的 50% ,所以即使父元素高度會變也沒關係。

2) 因為要回推自己的一半高度,所以最好是本身的高度是能夠計算的情況下使用。

3) 以此類推,這也同時能適用水平置中!

div {
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

這看似有點麻煩,不過這方法在很多情況下真的蠻實用的!


3. table-cell

第三個方法就是把要垂直置中的元素偽裝成表格的形式~其實在 css 裡面可以寫 vertical-align: center 看似就能把這物件垂直置中了,但這條僅適用於表格 table 內的元素。

所以在這情況下

<div class="wrapper">
    <h2>把我垂直置中</h2>
</div>

我們就是要把外面的 div 做成表格,裡面的 h2 做成表格內元素

.wrapper {
  display: table;
  height: 300px;
}
h2 {
  display: table-cell;
  vertical-align: middle;
}

這樣就可以把中間的 h2 垂直置中囉!

但因為這方法必須要改掉 display 有時反而會讓其他 css 跑版,所以需要斟酌使用


4. flex

最後一個也是最好用的,"FLEX"

.vertical-middle {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

直接把這個 class 套在父元素上,子元素就能夠垂直置中囉!是不是方便得有點驚人。

但因為這算是蠻新的方式,還在奢望 IE 能夠支援嗎?常常在專案上因為支援度不夠所以都派不上用場,因此也對這個 flex 不是很熟悉,但他同時也能夠做到水平位置的設定,在未來應該有很大的發展性,如果有興趣的人可以再研究看看這篇或是再繼續 google 查查。


好~了~

以上四種是自己在前端網頁開發時,需要垂直置中時可能會採用的解法。當然在網路上還有很多種其他的方式,不過自己用這四種方法就都能解決可能會遇到的各種情況,當然還是期待有天能有個最佳解出來。但在那一天來臨前各位開發者們還是就繼續見招拆招囉><


Originally published at blog.eddiewen.me on May 16, 2015.