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

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

<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;

　　}

________________________________________________________

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

转载于:https://www.cnblogs.com/maochunhong/p/9204077.html