文章專區
網頁設計相關文章
用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(容器)可用的屬性
範例: