本文主要总结几种常见的CSS居中方式，下面我准备分为三个方向来写，分别是水平居中，垂直居中，水平垂直居中。
水平居中
1、inline元素如何实现水平居中？（text-align:center）
2、为什么text-align对block元素水平居中无效？（text-align只对行内元素生效）
3、block元素实现水平居中？（margin:0 auto）
垂直居中
1、inline元素垂直居中、block元素垂直居中，两者的实现需要区别对待吗？（yes）
2、inline元素如何实现垂直居中？（height = line-height，多与text-align:center结合后应用于导航栏）
水平垂直居中
1、如果是多行文字怎么实现水平垂直居中？ 效果预览
.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 相关计算依赖于其包含块，最初能确定值，所以margin:keywords auto中auto会均分包含块的剩余空间。而height 相关计算依赖于其自身内容高度，自身内容高度是不能最初确定值的，所以margin:auto keywords无法让块级元素垂直居中。
深入了解请参考https://www.zhihu.com/question/21644198
（2）已知父容器高度，利用table自带功能使内容垂直居中【想实现水平垂直居中的效果，可以给内容加个div，再设置margin:0 auto】 效果预览
<style>
.parent{
border:1px solid pink;
height:300px;
}
.child{
border:1px solid yellow;
}
</style>
<table class="parent">
<tr>
<td class="child">
利用table自带功能使内容垂直居中利用table自带功能使内容垂直居中利用table自带功能使内容垂直居中利用table自带功能使内容垂直居中利用table自带功能使内容垂直居中
</td>
</tr>
</table>
（3）已知父容器宽高，将div装成table，利用margin:0 auto、display:table-cell属性实现水平垂直居中 效果预览
table自带功能与将div装成table实现水平垂直居中作对比 效果预览
.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、已知宽高，利用负边距实现水平垂直居中 效果预览
position:absolute;
width:300px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-150px;
4、未知宽高，利用css3的新属性transform:translate(x,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实现水平垂直居中 效果预览
position:absolute;
width:300px;
height:200px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
6、已知宽度，在父容器内利用flex属性实现水平垂直居中（不兼容IE）
效果预览
display:flex;
justify-content:center; /*水平居中*/
align-items:center; /*垂直居中*/
flex-direction:column; /*子元素非水平排列而是垂直排列*/
7、利用100%高度的after、before加上inline-block实现水平垂直居中
效果预览
.parent{
border:1px solid pink;
height:300px;
text-align:center; /*水平居中*/
}
.child{
border:1px solid #ccc;
width:300px;
height:150px;
display:inline-block; /*块级元素具有行内元素的属性，支持元素从左到右排列*/
vertical-align:middle; /*子元素垂直居中*/
}
.parent .before{
border:1px solid yellow;
height:100%;
display:inline-block; /*行内元素具备块级元素的特征，支持设置宽高*/
vertical-align:middle;
}
.parent .after{
border:1px solid orange;
height:100%;
display:inline-block;
vertical-align:middle; /*子元素垂直居中的参照物*/
}
8、利用100%高度的after、before加上inline-block实现水平垂直居中（优化版）
效果预览
.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
