CSS 垂直置中的七個方法 | Div 內容 置中
之前我有寫過一篇文章:「CSS垂直置中的三個方法」,介紹了三種常用的垂直置中的小技巧,這篇將延續該篇文章,繼續介紹另外四種垂直置中的方法,如此一來總共就有七種垂直置中的方式可以搭配使用囉!(雖然現在瀏覽器的支援度都差不多支援了,但仍然建議安全起見都要測試一下,特別是IE)參考:CSS垂直置中的三個方法[1]七種垂直置中的方法因此,糾竟是哪七種CSS垂直置中的方法呢?就是以下這七種的啦!設定行高(line-height)添加偽元素calc動態計算使用表格或假裝表格transform絕對定位使用Flexbox因為「設定行高」、「添加偽元素」以...
之前我有寫過一篇文章:「CSS 垂直置中的三個方法」,介紹了三種常用的垂直置中的小技巧,這篇將延續該篇文章,繼續介紹另外四種垂直置中的方法,如此一來總共就有七種垂直置中的方式可以搭配使用囉!( 雖然現在瀏覽器的支援度都差不多支援了,但仍然建議安全起見都要測試一下,特別是 IE )
參考:CSS 垂直置中的三個方法[1]
七種垂直置中的方法因此,糾竟是哪七種 CSS 垂直置中的方法呢?就是以下這七種的啦!
設定行高 ( line-height ) 添加偽元素 calc 動態計算 使用表格或假裝表格 transform 絕對定位 使用 Flexbox因為「設定行高」、「添加偽元素」以及「calc 動態計算」,在 CSS 垂直置中的三個方法[2] 裏頭都介紹過,所以就不在這篇文章詳述,這篇文章主要介紹其他的四種垂直置中的方法。
使用表格或假裝表格或許有些人會發現,在表格這個 HTML 裡面常用的 DOM 裏頭,要實現垂直置中是相當容易的,只需要下一行vertical-align:middle就可以,為什麼呢?最主要的原因就在於 table 的 display 是 table,而 td 的 display 是 table-cell,所以我們除了直接使用表格之外,也可以將要垂直置中元素的父元素的 display 改為 table-cell,就可以輕鬆達成,不過修改 display 有時候也會造成其他樣式屬性的連動影響,需要比較小心使用。( 範例:css-vertical-align-7methods-demo1.html[3] )
HTML:
<table> <tr> <td> <div>表格垂直置中</div> </td> </tr> </table> <div class="like-table"> <div>假的表格垂直置中</div> </div>CSS:
.like-table{ display:...