[CSS] 如何做出水平&垂直置中

CSS要做到水平或垂直置中,依不同的情況使用的方法也不相同。

水平置中

文字、圖片等行內(inline)元素的水平置中

這個最簡單,給容器元素設置text-align:center即可。
HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS:

Demo網頁

區塊(block)元素的水平置中

這個第二簡單,將區塊元素設置margin-left:auto, margin-right:auto 就有了。
HTML:

 

CSS:

Demo網頁

垂直置中

垂直置中就要看容器元素的高度了,有不同的做法,而且由於有IE6,IE7這兩個怪東西,還得用上一點hack技巧,真討厭…

容器元素高度不確定的行內元素的垂直置中

這個對容器元素的上下設置相同的padding就可以做到了
HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

CSS:

Demo網頁

容器元素高度固定的單行文字垂直置中

這個也很簡單,對容器元素設置line-height並且設定跟高度一樣就可以了
HTML:

Lorem ipsum

CSS:

Demo網頁

容器元素高度固定的多行文字、圖片、區塊元素的垂直置中

這其實才是本文的重點,很多人搞不定的就是這裡。有人會說用table加上vertical-align:middle就搞定啦,那是你偷懶,好嗎,咱們正統的Web Developer才不用那種偷吃步咧。而且vertical-align只對td,th元素有效,對其他區塊元素就沒用啦,好在現在有一個叫table-cell的東西,我們可以將區塊元素設置成display:tabel-cell就可以讓它變成如同td,th般,這樣就可以套上vertical-align啦,喔喔喔~你看看,這世界多美好~~(灑花)(轉圈)
HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS:

Demo網頁

IE6 IE7 Hack

不過當我們把做好的網頁拿到IE6,7下面看,唉呀,怎麼沒有置中啦,吼吼吼~~~萬惡的IE6,為什麼不趕快消失啦~~唉唷,沒有辦法啦,你沒看到客戶都用IE6嗎,IE6不能看那還接得到案子嘛,唉…那只好搬出看家本領了,hack絕招快快拿出來~~!!

為了這個死IE6,我們要在內容元素外面再包一層,然後用只有IE看淂懂的*星號,先對最外層的容器元素設置*position:relative,好讓後面的絕招可以產生作用,然後對這個外層元素設置*position:absolute跟*top:50%,這樣它的左上角原點會下降到容器元素的中心點,最後再對真正裡面的內容元素設置*position:relative和*top:-50%和*left:-50%,讓它往上往左提升本身高度的一半,這樣最後結果就是置中啦~~
HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS:

範例Demo

參考資料
語法 | 用css讓區塊水平垂直置中
[CSS]讓div內的物件垂直、水平居中

在〈[CSS] 如何做出水平&垂直置中〉中有 2 則留言

發佈留言