本文主要總結(jié)幾種常見的CSS居中方式搅荞，下面我準(zhǔn)備分為三個方向來寫青责，分別是水平居中，垂直居中取具，水平垂直居中脖隶。
水平居中
1、inline元素如何實現(xiàn)水平居中暇检？（text-align:center）
2产阱、為什么text-align對block元素水平居中無效？（text-align只對行內(nèi)元素生效）
3块仆、block元素實現(xiàn)水平居中构蹬？（margin:0 auto）
垂直居中
1、inline元素垂直居中悔据、block元素垂直居中庄敛，兩者的實現(xiàn)需要區(qū)別對待嗎？（yes）
2科汗、inline元素如何實現(xiàn)垂直居中藻烤？（height = line-height，多與text-align:center結(jié)合后應(yīng)用于導(dǎo)航欄）
水平垂直居中
1、如果是多行文字怎么實現(xiàn)水平垂直居中怖亭？ ????效果預(yù)覽
.parent{
border:1px solid pink;
height:300px;
line-height:300px;
text-align:center; /*水平居中*/
}
.child{
border:1px solid yellow;
width:200px;
display:inline-block;
vertical-align:middle;
word-break:break-all;
line-height:2;
}
2涎显、block元素的水平垂直居中
（1）既然margin:0 auto可以讓塊級元素水平居中，那為什么margin:auto 0不可以讓塊級元素垂直居中呢兴猩？
width 相關(guān)計算依賴于其包含塊期吓，最初能確定值，所以margin:keywords auto中auto會均分包含塊的剩余空間倾芝。而height 相關(guān)計算依賴于其自身內(nèi)容高度讨勤，自身內(nèi)容高度是不能最初確定值的，所以margin:auto keywords無法讓塊級元素垂直居中晨另。
深入了解請參考https://www.zhihu.com/question/21644198
（2）已知父容器高度悬襟，利用table自帶功能使內(nèi)容垂直居中【想實現(xiàn)水平垂直居中的效果，可以給內(nèi)容加個div拯刁，再設(shè)置margin:0 auto】 ????效果預(yù)覽
<style>
.parent{
border:1px solid pink;
height:300px;
}
.child{
border:1px solid yellow;
}
</style>
<table class="parent">
<tr>
<td class="child">
利用table自帶功能使內(nèi)容垂直居中利用table自帶功能使內(nèi)容垂直居中利用table自帶功能使內(nèi)容垂直居中利用table自帶功能使內(nèi)容垂直居中利用table自帶功能使內(nèi)容垂直居中
</td>
</tr>
</table>
（3）已知父容器寬高脊岳，將div裝成table，利用margin:0 auto垛玻、display:table-cell屬性實現(xiàn)水平垂直居中 ????效果預(yù)覽
table自帶功能與將div裝成table實現(xiàn)水平垂直居中作對比 ????效果預(yù)覽
.parent{
border:1px solid pink;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;/*之所以子元素可以垂直居中對齊割捅，是因為td元素具有valign屬性，而vertical-align:middle只會在具有valign屬性的對象中生效*/
}
.child{
border:1px solid yellow;
width:200px;
margin:0 auto;
}
提問：doctype對瀏覽器解析vertical-align的影響帚桩？
答案
3亿驾、已知寬高，利用負(fù)邊距實現(xiàn)水平垂直居中 ????效果預(yù)覽
position:absolute;
width:300px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-150px;
4账嚎、未知寬高莫瞬，利用css3的新屬性transform:translate(x,y)屬性實現(xiàn)水平垂直居中 ????效果預(yù)覽
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
5、已知寬高郭蕉，利用absolute疼邀、margin:auto實現(xiàn)水平垂直居中 ????效果預(yù)覽
position:absolute;
width:300px;
height:200px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
6、已知寬度召锈，在父容器內(nèi)利用flex屬性實現(xiàn)水平垂直居中（不兼容IE）
效果預(yù)覽
display:flex;
justify-content:center; /*水平居中*/
align-items:center; /*垂直居中*/
flex-direction:column; /*子元素非水平排列而是垂直排列*/
7旁振、利用100%高度的after、before加上inline-block實現(xiàn)水平垂直居中
效果預(yù)覽
.parent{
border:1px solid pink;
height:300px;
text-align:center; /*水平居中*/
}
.child{
border:1px solid #ccc;
width:300px;
height:150px;
display:inline-block; /*塊級元素具有行內(nèi)元素的屬性涨岁，支持元素從左到右排列*/
vertical-align:middle; /*子元素垂直居中*/
}
.parent .before{
border:1px solid yellow;
height:100%;
display:inline-block; /*行內(nèi)元素具備塊級元素的特征拐袜，支持設(shè)置寬高*/
vertical-align:middle;
}
.parent .after{
border:1px solid orange;
height:100%;
display:inline-block;
vertical-align:middle; /*子元素垂直居中的參照物*/
}
8、利用100%高度的after梢薪、before加上inline-block實現(xiàn)水平垂直居中（優(yōu)化版）
效果預(yù)覽
.parent{
border:1px solid pink;
height:300px;
text-align:center; /*水平居中*/
}
.child{
border:1px solid #ccc;
width:300px;
display:inline-block;
vertical-align:middle;
}
.parent:before{
content:'';
outline:1px solid transparent; /*元素透明*/
display:inline-block;
height:100%;
vertical-align:middle;
}
.parent:after{
content:'';
outline:1px solid transparent;
display:inline-block;
height:100%;
vertical-align:middle;
}
參考資料：https://jscode.me/t/topic/1936
http://www.bkjia.com/HTML_CSS/1029355.html
