常见的几种水平垂直居中方法

自己总结的几种水平、垂直的居中方法如下

<div class="parent" id="parent">
　　<div class="child" id="child">DEMO</div>
</div>

 

块级水平居中
1、使用inline-block+text-align ( 行内元素水平居中 父元素用text-align:center )
　　对子框设置display:inline-block，对父框设置text-align:center
　　例子如下
　　.child{
　　　　display:inline-block;
　　}
　　.parent{
　　　　text-align:center;
　　}

　　优点 兼容性好，甚至可以兼容ie6、ie7
　　缺点 child里的文字也会水平居中，可以在.child添加text-align:left;还原

　　2、使用table+margin （ 块级元素水平居中 子元素用margin:0 auto ）
　　对子框设置display:table，再设置margin:0 auto。
　　例子如下
　　.child
　　　　margin:0 auto;
　　}
　　优点：只设置了child，ie8以上都支持
　　缺点：不支持ie6、ie7,将div换成table

　　3、ie6 7 8不兼容
　　.parent{
　　　　display:flex;
　　}
　　.child{
　　　　margin:0 auto;
　　}

　　4、ie6 7 8不兼容
　　.parent{
　　　　display:flex;
　　　　justify-content:center;
　　}

　　5、transform属于css3内容
　　.parent{
　　　　position:relative;
　　}
　　.child{
　　　　position:absolute;
　　　　left:50%;
　　　　transform:translateX(-50%);
　　}

垂直居中

　　1、ie8以上均支持
　　.parent{
　　　　display:table-cell;
　　　　vertical-align:middle;
　　}

　　2、transform属于css3内容
　　.parent{
　　　　position:relative;
　　}
　　.child{
　　　　position:absolute;
　　　　top:50%;
　　　　transform:translateY(-50%);
　　}

水平垂直居中

　　1、.parent{
　　　　position:relative;
　　}
　　.child{
　　　　position:absolute;
　　　　top:50%;
　　　　left:50%;
　　　　transform:translate(-50%,-50%);
　　}

　　2、.parent{
　　　　text-align:center;
　　　　display:table-cell;
　　　　vertical-align:middle;
　　}
　　.child{
　　　　display:inline-block;
　　}

　　3、.parent{
　　　　display:flex;
　　　　justify-content:center;
　　　　align-items:center;
　　}

　　4、（ vertical-align只对行内元素有效 所以需要用display:table-cell转为单元格 ）
　　.parent{
　　　　display:table-cell;
　　　　vertical-align:middle;

　　}

　　.child{
　　　　margin:0 auto;

　　}

________________________________________________________

小伙伴们可以尝试下，有疑问可联系