html p置中html置中divhtml置中靠左html table置中html文字置中csshtml標題置中div table置中html置中

CSS 垂直置中的七個方法

文章推薦指數： 80 %
投票人數：10人

或許有些人會發現，在表格這個HTML 裡面常用的DOM 裏頭，要實現垂直置中是相當容易的，只需要下一行 vertical-align:middle 就可以，為什麼呢？ ARCHIVE ABOUT CONTACT Designthinkingiseverywhere CSS垂直置中的七個方法 之前我有寫過一篇文章：「CSS垂直置中的三個方法」，介紹了三種常用的垂直置中的小技巧，這篇將延續該篇文章，繼續介紹另外四種垂直置中的方法，如此一來總共就有七種垂直置中的方式可以搭配使用囉！(雖然現在瀏覽器的支援度都差不多支援了，但仍然建議安全起見都要測試一下，特別是IE) 參考：CSS垂直置中的三個方法 七種垂直置中的方法 因此，糾竟是哪七種CSS垂直置中的方法呢？就是以下這七種的啦！ 設定行高(line-height) 添加偽元素 calc動態計算 使用表格或假裝表格 transform 絕對定位 使用Flexbox 因為「設定行高」、「添加偽元素」以及「calc動態計算」，在CSS垂直置中的三個方法裏頭都介紹過，所以就不在這篇文章詳述，這篇文章主要介紹其他的四種垂直置中的方法。

使用表格或假裝表格 或許有些人會發現，在表格這個HTML裡面常用的DOM裏頭，要實現垂直置中是相當容易的，只需要下一行vertical-align:middle就可以，為什麼呢？最主要的原因就在於table的display是table，而td的display是table-cell，所以我們除了直接使用表格之外，也可以將要垂直置中元素的父元素的display改為table-cell，就可以輕鬆達成，不過修改display有時候也會造成其他樣式屬性的連動影響，需要比較小心使用。

(範例：css-vertical-align-7methods-demo1.html) HTML：

表格垂直置中
假的表格垂直置中
CSS： .like-table{ display:table-cell; } td, .like-table{ width:150px; height:100px; border:1pxsolid#000; vertical-align:middle; } tddiv, .like-tablediv{ width:100px; height:50px; margin:0auto; color:#fff; font-size:12px; line-height:50px; text-align:center; background:#c00; } .like-tablediv{ background:#069; } transform transform是CSS3的新屬性，主要掌管元素的變形、旋轉和位移，利用transform裏頭的translateY(改變垂直的位移，如果使用百分比為單位，則是以元素本身的長寬為基準)，搭配元素本身的top屬性，就可以做出垂直置中的效果，比較需要注意的地方是，子元素必須要加上position:relative，不然就會沒有效果喔。

(範例：css-vertical-align-7methods-demo2.html) .use-transform{ width:200px; height:200px; border:1pxsolid#000; } .use-transformdiv{ position:relative; width:100px; height:50px; top:50%; transform:translateY(-50%); background:#095; } 絕對定位 絕對定位就是CSS裏頭的position:absolute，利用絕對位置來指定，但垂直置中的做法又和我們正統的絕對位置不太相同，是要將上下左右的數值都設為0，再搭配一個margin:auto，就可以辦到垂直置中，不過要特別注意的是，設定絕對定位的子元素，其父元素的position必須要指定為relative喔！而且絕對定位的元素是會互相覆蓋的，所以如果內容元素較多，可能就會有些問題。

(範例：css-vertical-align-7methods-demo3.html) .use-absolute{ position:relative; width:200px; height:150px; border:1pxsolid#000; } .use-absolutediv{ position:absolute; width:100px; height:50px; top:0; right:0; bottom:0; left:0; margin:auto; background:#f60; } 使用Flexbox 回想一下之前的文章深入解析CSSFlexbox，裡面介紹了CSS3最威的盒子模型：Flexbox，使用align-items或align-content的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！(範例：css-vertical-align-7methods-demo4.html) .use-flexbox{ display:flex; align-items:center; justify-content:center; width:200px; height:150px; border:1pxsolid#000; } .use-flexboxdiv{ width:100px; height:50px; background:#099; } 以上就是一些垂直置中的方法，由於垂直置中往往會動用到修改display這個屬性，往往也會在排版上造成一些影響，例如不該用flexbox的地方如果用了flexbox，不該用table的地方用了table，不該用inline-block的地方用了inline-block，後續反而要多寫許多其他的定位樣式來修正，那就有點本末倒置了，因此如何活用這些CSS垂直置中的方法，就要端看大家的版面結構而靈活運用囉！^_^ BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO

請為這篇文章評分？

延伸文章資訊