居中是我們使用css來布局時常遇到的情況。使用css來進行居中時,有時一個屬性就能搞定,有時則需要一定的技巧才能兼容到所有瀏覽器,本文就居中的一些常用方法做個簡單的介紹。
注:本文所講方法除了特別說明外,都是兼容IE6+、谷歌、火狐等主流瀏覽器的。
先來說幾種簡單的、人畜無害的居中方法
1. 把margin設為auto
具體來說就是把要居中的元素的margin-left和margin-right都設為auto,此方法只能進行水平的居中,且對浮動元素或絕對定位元素無效。
2、使用 text-align:center
這個沒什么好說的,只能對圖片,按鈕,文字等行內元素(display為inline或inline-block等)進行水平居中。但要說明的是在IE6、7這兩個奇葩的瀏覽器中,它是能對任何元素進行水平居中的。
3、使用line-height讓單行的文字垂直居中
把文字的line-height設為文字父容器的高度,適用于只有一行文字的情況。
4、使用表格
如果你使用的是表格的話,那完全不用為各種居中問題而煩惱了,只要用到 td(也可能會用到 th)元素的 align="center" 以及 valign="middle" 這兩個屬性就可以完美的處理它里面內容的水平和垂直居中問題了,而且表格默認的就會對它里面的內容進行垂直居中。如果想在css中控制表格內容的居中,垂直居中可以使用 vertical-align:middle,至于水平居中,貌似css中是沒有相對應的屬性的,但是在IE6、7中我們可以使用text-align:center來對表格里的元素進行水平居中,IE8+以及谷歌、火狐等瀏覽器的text-align:center只對行內元素起作用,對塊狀元素無效。


在ie6、7中可以通過css的text-algin來控制表格內容的水平方向的對齊,無論內容是行內元素還是塊狀元素都有效。

但在ie8+以及chrome、firefox等瀏覽器中的text-align:center對塊狀元素無效,只能用表格自有的align屬性。
5、使用display:table-cell來居中
對于那些不是表格的元素,我們可以通過display:table-cell 來把它模擬成一個表格單元格,這樣就可以利用表格那很方便的居中特性了。例如:


但是,這種方法只能在IE8+、谷歌、火狐等瀏覽器上使用,IE6、IE7都無效。
那面所說的都是很基礎的方法,自然不能稱之為奇淫巧計,下面就來說一些需要使用一些技巧的居中方法。
新聞熱點
疑難解答