一、水平居中
1、行內元素（text-align:center）
（適用：行內元素，或類行內元素（如文本）。包括inline/inline-block/inline-table/inline/flex 等類型的元素實現居中。）
行內元素水平居中，可把行內元素嵌套在水平居中的塊狀元素中。
<style>
.container{width:800px; background-color:#f6f6f6;}
.a-center{text-align:center;}
.span{background-color: yellow;}
.block-1{width:80%; background-color: #ccc;}
</style>
<div class='container'>
<div class='a-center'>
<span class='span-1'>1、行內元素嵌套在包含text-align:center的塊狀元素中。適用inline/inline-block/inline-table/inline/flex 等類型的元素實現居中。</span>
</div>
<div class='a-center block-1'>2、塊狀元素使用text-align:center居中無效</div>
<span class='a-center span'>3、行內元素直接使用text-align:center居中無效</span>
</div>2、塊狀元素
1）將margin-left和margin-right設置爲auto（適用：寬度固定的塊狀元素。）
（對於寬度不固定的塊狀元素，如果把margin-left和margin-right設置爲auto，會把塊狀元素撐到最大。因此不能採用這種方式。
另外垂直居中不能通過使用margin:auto來實現。寬度計算是適應父級元素規則，而高度計算則是一系列“撐高”規則，而非“適應於父級”規則。）
對於寬度固定的塊狀元素，可以將margin-left和margin-right設置爲auto來實現目標。
<style>
.container{width:800px; background-color:#ccc;}
.block-1{width:80%; background-color: yellow; margin: 0 auto;}
</style>
<div class='container'>
<div class='a-center block-1'>2、塊狀元素使用text-align:center居中無效</div>
</div>效果如下圖所示：
優缺點：上面這種方式，只適用固定寬度的元素。但只要塊狀元素的寬度是固定的，不論寬度值設置爲多少，都能保持居中效果。
2）display:inline-block和text-align:center結合（適用：寬度不固定的塊狀元素，且父元素只有一個塊狀元素）
對於寬度不固定的塊狀元素，將塊狀元素設置爲display:inline-block，再將其嵌套在另外一個text-align:center的塊狀元素中。
<style>
.container{width:600px; background-color:#ccc;text-align:center;}
.inlinebox{display:inline-block; background-color: yellow; margin: 0 auto;}
</style>
<div class='container'>
<div class='a-center inlinebox'>不固定寬度的塊狀元素居中</div>
</div>
優缺點：只適用寬度不固定的元素，只適用於只有父元素只有一個子元素或父元素的多個子元素都需要居中。並且這個方案需要改變父元素的水平對齊方式。並且如果父元素有多個子元素，沒有辦法讓這個元素處於父元素的中間。
3）display:table和margin:auto結合（適用：所有塊狀元素）
<style>
.centerbox{display:table; background-color:#f6f6f6;margin: 0 auto;}
</style>
<div class='centerbox'>塊狀元素水平居中</div>4）使用position:absolute，設置left、top，margin-left、margin-top（適用：寬度固定的塊狀元素）
設置元素position:absolute，並設置left、top爲50%，margin-left、margin-top分別爲元素-1/2元素寬、-1/2元素高。
<style>
.container{position:relative; width:400px; height:200px; border:1px solid #ddd;}
.centerbox{
position:absolute;
width:200px;
height:100px;
top:50%;/*垂直居中相關*/
left:50%;/*水平居中相關*/
margin-top:-50px; /*垂直居中相關*/
margin-left:-100px;/*水平居中相關*/
background-color: #ddd;
}
</style>
<div class='container'>
<div class='a-center centerbox'>固定寬度的塊狀元素居中</div>
</div>
效果如下圖所示：
優缺點：兼容所有瀏覽器，但這種方式只適用寬度固定的塊狀元素。並且需要根據自身寬度去設置margin-left值。
5）使用position:fixed，同樣設置left、margin-left（適用：寬度不固定的塊狀元素）
設置元素position:fixed，並設置left爲50%，margin-left爲 -1/2元素寬
<style>
.centerbox{
position:fixed;
width:200px;
height:100px;
left:50%;/*水平居中相關*/
top:50%;/*垂直居中相關*/
margin-top:-50px;/*垂直居中相關/
margin-left:-100px;/*水平居中相關*/
background-color: #ddd;
}
</style>
<div class='a-center centerbox'>固定寬度的塊狀元素居中</div>效果如下圖：
優缺點：postion:fixed不兼容IE6及以下瀏覽器，並且這種方式只適用寬度固定的塊狀元素。並且需要根據自身寬度去設置margin-left值。
6）使用position:absoute，設置left、right、margin-left、margin-right(適用：寬度不固定的塊狀元素）
<style>
.centerbox{
position:fixed;
width:200px;
height:100px;
left:0;/*水平居中相關*/
right:0;/*水平居中相關*/
bottom:0;/*垂直居中相關*/
top:0;/*垂直居中相關*/
margin:auto;/*水平居中、垂直居中相關/
background-color: #ddd;
}
</style>
<div class='a-center centerbox'>固定寬度的塊狀元素居中</div>優缺點：這種方式不需要根據元素寬度去設置margin的值。但是這種方式只適用寬度固定的塊狀元素。
7）使用position:fixed，同樣設置left、right、margin-left、margin-right（適用：寬度不固定的塊狀元素）
設置元素爲position:fixed，同時設置left、right爲0，margin-left、margin-right爲auto
<style>
.centerbox{
position:fixed;
width:200px;
height:100px;
left:0;/*水平居中相關/
right:0;/*水平居中相關*/
bottom:0;/*垂直居中相關/
top:0;/*垂直居中相關*/
margin:auto;/*水平居中、垂直居中相關*/
background-color: #ddd;
}
</style>
<div class='a-center centerbox'>固定寬度的塊狀元素居中</div><style>
.centerbox{display:table; background-color:#f6f6f6;margin: 0 auto;}
</style>
<div class='centerbox'>塊狀元素水平居中</div>8）使用css3的display:-webkit-box屬性，再設置-webkit-box-pack:center（適用：寬度是否固定都可適用）
<style>
.container{
width:500px;
height:90px;
display:-webkit-box;
/*水平居中*/
-moz-box-pack:center; /*Firefox支持*/
-webkit-box-pack:center; /*Safari、Opera 以及 Chrome 支持 */
-ms-flex-pack: center; /*IE10版本*/
/*垂直居中*/
-webkit-box-align:center; /*Safari、Opera 以及 Chrome 支持 */
-moz-box-align:center; /*Firefox支持*/
background:yellow;
color:black;
}
.centerbox1{background-color:red;}
.centerbox2{background-color:green;}
</style>
<div class='container'>
<div class='centerbox1'>元素居中</div>
<div class='centerbox2'>元素居中</div>
</div>優缺點：實現簡單，不論元素寬度是否固定均可使用。但只適用於只有父元素只有一個子元素或父元素的多個子元素都需要居中（如果多個子元素超出寬度會溢出顯示）。並且不支持IE9及以下版本。
9）使用css3的新屬性transform:translate(x,y)屬性（適用：寬度是否固定都可適用，但chrome下寬度要爲偶數）
<style>
.centerbox{
position:absolute;
width:200px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:red;
}
</style>
<div class='container'>
<div class='centerbox'>塊狀元素水平居中</div>
</div>
效果圖如下：
優缺點：不論塊狀元素寬度是否固定均可使用。但是IE8及以下版本不支持transform；另外在Chrome瀏覽器下如果元素寬度計算出來的值必須是偶數，否則會出現像糊（最新的Chrome版本不會有這個問題，我測試環境是61的，是正常的）。
二、垂直居中
由於水平居中裏面有些代碼實現已經把垂直居中的也包括進去了，垂直居中的就簡單描述。
1、高度確定的單行文本元素（行內元素和塊狀元素均可以）
將height和line-height設置成一樣的值。
<style>
.middlebox{display:inline-block; width:100px; height:50px; line-height:50px; background-color:red}
</style>
<span class='middlebox'>垂直居中</span>2、塊狀元素
1)插入display:table、display:table-cell等元素，並將元素放到display:table-cell元素中（適用：高度不確定的塊狀元素）
<style>
.container{width:200px; height:80px; background-color:#ccc;text-align:center;}
.table{display:table; height:100%;}
.table-cell{display:table-cell;vertical-align:middle;}
.middlebox{width:100px; height:50px; background-color:red}
</style>
<div class='container'>
<div class='table'>
<div class='table-cell'>
<span class='middlebox'>利用display:table實現多行文本垂直居中</span>
</div>
</div>
</div>
效果如下圖所示：
優缺點：IE7及其以下版本不兼容display:table、display:table-cell。另外這個方案需要增加額外的標籤。
3、塊狀元素垂直居中的其他方式
在一、2、塊狀元素中的3）-9）實現類似，代碼中其實已經包含，不再敘述。
說明：如果是固定寬度、高度的元素，居中都好處理。對於元素寬度、高度不固定的，目前除了用display:table-cell來實現，還沒有找到兼容性比較好的方式。