CSS中的居中可分為水平居中和垂直居中。水平居中分為行內(nèi)元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細(xì)介紹這幾種情況。

1.行內(nèi)元素居中

顧名思義，行內(nèi)元素居中是只針對行內(nèi)元素的，比如文本（text）、圖片（img）、按鈕等行內(nèi)元素，可通過給父元素設(shè)置 text-align:center 來實現(xiàn)。另外，如果塊狀元素屬性display 被設(shè)置為inline時，也是可以使用這種方法。但有個首要條件是子元素必須沒有被float影響，否則一切都是無用功。

2、塊狀元素居中

（1）、定寬塊狀元素居中

滿足定寬（塊狀元素的寬度width為固定值）和塊狀兩個條件的元素可以通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中。

.div1{
　　　　 width:200px;
　　　　 border:1px solid red;
margin:0 auto;
}
<div class="div1">Hello world</div>

（2）、不定寬塊狀元素居中

在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設(shè)置居中，比如網(wǎng)頁上的分頁導(dǎo)航，因為分頁的數(shù)量是不確定的，所以我們不能通過設(shè)置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

有三種方法可以對不定寬塊狀元素進行居中：

方法1：

將要顯示的元素加入到 table 標(biāo)簽當(dāng)中，然后為 table 標(biāo)簽設(shè)置“左右margin”值為“auto”來實現(xiàn)居中； 或使用 display : table；然后設(shè)該元素“左右margin”值為“auto”來實現(xiàn)居中。后面的display:table; 方法會更簡潔。

為什么加入table標(biāo)簽? 是利用table標(biāo)簽的長度自適應(yīng)性---即不定義其長度也不默認(rèn)父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。

方法2：

改變塊級元素的 display 為 inline 類型（設(shè)置為 行內(nèi)元素 顯示），然后使用 text-align:center 來實現(xiàn)居中效果。

這種方法相比第一種方法的優(yōu)勢是不用增加無語義標(biāo)簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內(nèi)元素，所以少了一些功能，比如設(shè)定長度值（變成inline-block就可以設(shè)置寬高）。

方法3：

通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來實現(xiàn)水平居中。

先設(shè)置父元素wrap清除浮動，然后左浮動。定位讓wrap向右偏移50%。然后定義子元素相對于父元素向左偏移50%。脫離父元素。加個邊框就可以明白一些了。另外用絕對定位也是可以的。

二、垂直居中

垂直居中可分為父元素高度確定的單行文本，以及父元素高度確定的多行文本。

1、父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和 line-height 高度一致來實現(xiàn)的。(height: 該元素的高度，line-height: 顧名思義，行高，指在文本中，行與行之間的 基線間的距離 )。

2、父元素高度確定的多行文本
有兩種方法：
方法1：

使用插入 table (包括tbody、tr、td)標(biāo)簽，同時設(shè)置 vertical-align：middle。

方法2：

設(shè)置塊級元素的 display 為 table-cell（設(shè)置為表格單元顯示），激活 vertical-align 屬性。但這種方法兼容性比較差， IE6、7 并不支持這個樣式。