難道沒有個好辦法可以垂直置中嗎？ - Medium

這真的是目前網頁前端中最惱人的問題了QQ 一直以來都沒有一個最佳解法，以下列出四種自己 ... 第三個方法就是把要垂直置中的元素偽裝成表格的形式～其實在css 裡面可以 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite難道沒有個好辦法可以垂直置中嗎？這真的是目前網頁前端中最惱人的問題了QQ一直以來都沒有一個最佳解法，以下列出四種自己常用的解法：1.padding

把我垂直置中

這方法就在父元素的.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做成表格，裡面的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查查。

好~了~以上四種是自己在前端網頁開發時，需要垂直置中時可能會採用的解法。

當然在網路上還有很多種其他的方式，不過自己用這四種方法就都能解決可能會遇到的各種情況，當然還是期待有天能有個最佳解出來。

但在那一天來臨前各位開發者們還是就繼續見招拆招囉>