CSS中的居中可分為水平居中和垂直居中。水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。
一、水平居中
1、行內元素居中
顧名思義，行內元素居中是只針對行內元素的，比如文本（text）、圖片（img）、按鈕等行內元素，可通過給父元素設置 text-align:center 來實現。另外，如果塊狀元素屬性display 被設置為inline時，也是可以使用這種方法。但有個首要條件是子元素必須沒有被float影響，否則一切都是無用功。
.div1{
text-align:center;
}
<div class="div1">Hello world</div>
2、塊狀元素居中
（1）、定寬塊狀元素居中
滿足定寬（塊狀元素的寬度width為固定值）和塊狀兩個條件的元素可以通過設置“左右margin”值為“auto”來實現居中。
.div1{
width:200px;
border:1px solid red;
margin:0 auto;
}
<div class="div1">Hello world</div>
（2）、不定寬塊狀元素居中
在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
有三種方法可以對不定寬塊狀元素進行居中：
方法1：
將要顯示的元素加入到 table 標簽當中，然後為 table 標簽設置“左右margin”值為“auto”來實現居中； 或使用 display : table；然後設該元素“左右margin”值為“auto”來實現居中。後面的display:table; 方法會更簡潔。
為什麼加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
如下例子：
table{
margin:0 auto;
}
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>Hello world</li>
<li>Hello world</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
.wrap{
background:#ccc;
display:table;
margin:0 auto;
}
<div class="wrap">
Hello world
</div>
方法2：
改變塊級元素的 display 為 inline 類型（設置為 行內元素 顯示），然後使用 text-align:center 來實現居中效果。
這種方法相比第一種方法的優勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值（變成inline-block就可以設置寬高）。
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline; //怎麼這一句用不用都是一樣效果的？
}
<div class="container">
<ul>
<li>Hello world</li>
<li>Hello world</li>
</ul>
</div>
方法3：
通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。
.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">Hello world</div>
</div>
先設置父元素wrap清除浮動，然後左浮動。定位讓wrap向右偏移50%。然後定義子元素相對於父元素向左偏移50%。脫離父元素。加個邊框就可以明白一些了。另外用絕對定位也是可以的。
二、垂直居中
垂直居中可分為父元素高度確定的單行文本，以及父元素高度確定的多行文本。
1、父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高，指在文本中，行與行之間的 基線間的距離 )。
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
<div class="wrap">
<h2>Hello world</h2>
</div>
2、父元素高度確定的多行文本
有兩種方法：
方法1：
使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。
.wrap{
height:300px;
background:#ccc;
vertical-align:middle; /* td 標簽默認情況下就默認設置了 vertical-align 為 middle，可以不需要顯式地設置 */
}
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<p>Hello world</p>
<p>Hello world</p>
<p>Hello world</p>
</div>
</td>
</tr>
</tbody>
</table>
.wrap{
background:#ccc;
display:table;
vertical-align:middle;
}
<div class="wrap">
<p>Hello world</p>
<p>Hello world</p>
<p>Hello world</p>
</div>
方法2：
設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性。但這種方法兼容性比較差， IE6、7 並不支持這個樣式。
.wrap{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
<div class="wrap">
<p>Hello world</p>
<p>Hello world</p>
<p>Hello world</p>
</div>
注：主要參考何問起網教程