文章專區

網頁設計相關文章

用css讓div垂直置中的方式

在網頁排版上,要讓div垂直置中是經常遇到的問題,這裡介紹幾個常見的解決方式。

1.line-height

這是初學者一開始會學到的方法,雖然相當簡單,但僅適用於單行文字排版,兩行以上的話行距會變大。

範例:

 

2.偽元素(before,after)+ display:inline-block

此方法可適用於單行或多行文字,以及區塊置中

缺點是需多寫一行css(偽元素)

範例:

 

3.display:table+table-cell

在最外層寫一個偽table,也就是display:table,然後在要垂直置中的區塊,加上display:table-cell以及vertical-align: middle

範例:

 

4.Flexbox

最方便彈性的方法,可以讓區塊內容自適應外面的容器,只要在最外層寫上

display:flex、align-items:center;(垂直置中) 、justify-content:center;(水平置中)即可

關於Flexbox的排版詳細可見CSS3的flexbox版面配置-flex container(容器)可用的屬性

範例: