CSS中的居中可分為水平居中和垂直居中。水平居中分為行內(nèi)元素居中和塊狀元素居中兩種情況等缀，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中缨恒。下面詳細介紹這幾種情況。
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)頁上的分頁導航，因為分頁的數(shù)量是不確定的解阅，所以我們不能通過設(shè)置寬度來限制它的彈性落竹。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
有三種方法可以對不定寬塊狀元素進行居中：
方法1：
將要顯示的元素加入到 table 標簽當中货抄，然后為 table 標簽設(shè)置“左右margin”值為“auto”來實現(xiàn)居中述召； 或使用 display : table；然后設(shè)該元素“左右margin”值為“auto”來實現(xiàn)居中蟹地。后面的display:table; 方法會更簡潔积暖。
為什么加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定），因此可以看做一個定寬度塊元素怪与，然后再利用定寬度塊狀居中的margin的方法夺刑，使其水平居中。
方法2：
改變塊級元素的 display 為 inline 類型（設(shè)置為 行內(nèi)元素 顯示）分别，然后使用 text-align:center 來實現(xiàn)居中效果遍愿。
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 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)標簽，同時設(shè)置 vertical-align：middle薯酝。
方法2：
設(shè)置塊級元素的 display 為 table-cell（設(shè)置為表格單元顯示）半沽，激活 vertical-align 屬性。但這種方法兼容性比較差吴菠， IE6、7 并不支持這個樣式浩村。
