CSS佈局技巧之--各類居中

居中是咱們使用css來佈局時常遇到的狀況。
使用css來進行居中時，有時一個屬性就能搞定，有時則須要必定的技巧才能兼容到全部瀏覽器，本文就居中的一些經常使用方法作個簡單的介紹。
注：本文所講方法除了特別說明外，都是兼容IE6+、谷歌、火狐等主流瀏覽器的。

先來講幾種簡單的、人畜無害的居中方法
1. 把margin設爲auto
具體來講就是把要居中的元素的margin-left和margin-right都設爲auto，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。

二、使用 text-align:center 
這個沒什麼好說的，只能對圖片，按鈕，文字等行內元素(display爲inline或inline-block等)進行水平居中。但要說明的是在IE六、7這兩個奇葩的瀏覽器中，它是能對任何元素進行水平居中的。

三、使用line-height讓單行的文字垂直居中
把文字的line-height設爲文字父容器的高度，適用於只有一行文字的狀況。

四、使用表格
若是你使用的是表格的話，那徹底不用爲各類居中問題而煩惱了，只要用到 td(也可能會用到 th)元素的 align="center" 以及 valign="middle" 這兩個屬性就能夠完美的處理它裏面內容的水平和垂直居中問題了,並且表格默認的就會對它裏面的內容進行垂直居中。若是想在css中控制表格內容的居中，垂直居中可使用 vertical-align:middle，至於水平居中，貌似css中是沒有相對應的屬性的,可是在IE六、7中咱們可使用text-align:center來對錶格里的元素進行水平居中，IE8+以及谷歌、火狐等瀏覽器的text-align:center只對行內元素起做用，對塊狀元素無效。





在ie六、7中能夠經過css的text-algin來控制表格內容的水平方向的對齊，不管內容是行內元素仍是塊狀元素都有效。



但在ie8+以及chrome、firefox等瀏覽器中的text-align:center對塊狀元素無效，只能用表格自有的align屬性。

五、使用display:table-cell來居中
對於那些不是表格的元素，咱們能夠經過display:table-cell 來把它模擬成一個表格單元格，這樣就能夠利用表格那很方便的居中特性了。例如：





可是，這種方法只能在IE8+、谷歌、火狐等瀏覽器上使用，IE六、IE7都無效。

那面所說的都是很基礎的方法，天然不能稱之爲奇淫巧計，下面就來講一些須要使用一些技巧的居中方法。

六、使用絕對定位來進行居中

此法只適用於那些咱們已經知道它們的寬度或高度的元素。
絕對定位進行居中的原理是經過把這個絕對定位元素的left或top的屬性設爲50%,這個時候元素並非居中的，
而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離，
因此須要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半。



運行效果：

若是隻想實現一個方向的居中，則能夠只使用left , margin-left 來實現水平居中，使用top , margin-top來實現垂直居中。

七、另外一種使用絕對定位來居中的方法
此法一樣只適用於那些咱們已經知道它們的寬度或高度的元素，而且遺憾的是它只支持IE9+,谷歌，火狐等符合w3c標準的現代瀏覽器。

下面用一段代碼來了解這種方法：


運行效果：

這裏若是不定義元素的寬和高的話，那麼他的寬就會由left,right的值來決定，高會由top,bottom的值來決定，因此必需要設置元素的高和寬。
同時若是改變left，right , top , bottom的值還能讓元素向某個方向偏移，你們能夠本身去嘗試。

八、使用浮動配合相對定位來進行水平居中
此方法也是關於浮動元素怎麼水平居中的解決方法，而且咱們不須要知道須要居中的元素的寬度。

浮動居中的原理是：把浮動元素相對定位到父元素寬度50%的地方，
但這個時候元素還不是居中的，而是比居中的那個位置多出了自身一半的寬度，
這時就須要他裏面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來，
而由於相對定位正是相對於自身來定位的，因此自身一半的寬度只要把left 或 right 設爲50%就能夠獲得了，於是不用知道自身的實際寬度是多少。
這種使用浮動配合相對定位來居中的方法，優勢是不用知道要居中的元素的寬度，即便這個寬度是不斷變化的也行；缺點是須要一個多餘的元素來包裹要居中的元素。
看下代碼：


運行效果：


九、利用font-size來實現垂直居中
若是父元素高度是已知的，要把它裏面的子元素進行水平垂直居中，則可使用這種方法，且子元素的寬度或高度都沒必要知道。
該方法只對IE6和IE7有效。
該方法的要點是給父元素設一個合適的font-size的值，這個值的取值爲該父元素的高度除以1.14獲得的值，
而且子元素必須 是一個inline或inline-block元素，須要加上vertical-align:middle屬性。
至於爲何是除以1.14而不是其餘的數，還真沒有人知道，你只須要記住1.14這個數就好了。




在方法5中說過在IE8+、火狐谷歌等如今瀏覽器中能夠用display:table-cell來進行居中，而這裏的font-size的方法則適用於IE6和IE7，因此把這兩種方法結合起來就能兼容全部瀏覽器了：

         

上面的例子中由於要居中的元素是一個塊狀元素，因此咱們還須要把他變成行內元素，若是要居中的元素是圖片等行內元素，則能夠省略此步。
另外，若是 vertical-align:middle 是寫在父元素中而不是子元素中，這樣也是能夠的，只不過計算font-size時使用的  1.14 這個 數值要變成大約 1.5 這個值。