本文主要总结几种常见的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】     效果预览

.parent{

border:1px solid pink;

height:300px;

}

.child{

border:1px solid yellow;

}

利用table自带功能使内容垂直居中利用table自带功能使内容垂直居中利用table自带功能使内容垂直居中利用table自带功能使内容垂直居中利用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;

}