前端里面各种水平垂直居中的方法（不低于5种）
2016-07-28 17:15:01
水平垂直居中的几个办法， 由浅到深的方法
1 大小固定(以高宽都为400px的为例)
.box{
position:absolute;
left:50%；
top:50%;
width:400px;
height:400px;
margin: -200px 0 0 -200px
}
优点， 方法简单， css就能搞定
缺点： 只能适应于大小固定的盒子
2. 同样是大小固定的盒子
.parent{
position:relative;
width:100%；
height:100%；
}
box{
position:absolute；
margin：auto auto;
left：0；
top:0;
bottom：0；
right:0;
width:400px;
height:400px;
}
优点： 方法简单， css就能搞定，
缺点：相对方法一稍微复杂一点点
3 同样是css, 而且还是走css3路线的
.parent{
position:relative;
width:100%；
height:100%；
}
box{
position:absolute；
top:50%；
left：50%;
width:400px;
height:400px;
transform(-50%, -50%)
}
优点： 方法简单， css就能搞定，
缺点：此方法和方法一有雷同， 但是用了css3. 目前为止兼容还是问题
4. 同样是css3， 但是使用目前比较新的flex布局， 也不算新， 只是天朝的的浏览器兼容阻止了flex的使用
.parent{
-display: -webkit-box;
display: -webkit-flex;
display: -moz-box; display:
-moz-flex; display:
-ms-flexbox; d
isplay: flex;
justify-content:center;
align-items: center;
}
box{
/*没要求*/
}
优点： 此方法比上面的几个方法要灵活一下， 而且不需要规定box的高宽
缺点：此方法什么都好，就是兼容不好，看着办吧
5. 同样适用css， 这种方法就可能好多了
.parent{
position:relative;
width:100%；
height:100%
display：table;
vertical-align: middle;
text-align:center;
}
box{
position:absolute；
display：table-cell;
vertical-align: middle;
}
优点： 此方法比上面的几个方法要灵活一下， 而且不需要规定box的高宽
缺点：只是欺骗了眼睛，实际上点击box以外的位置， 还是点击到的是box
6 下面方法是使用jquery方法
css代码：
.parent{
position:relative;
width:100%；
height:100%；
}
box{
position:absolute；
top:50%；
left：50%;
}
jq代码：
var elw = $('.box').width();
var elh = $('.box').height();
$('.box').css({‘margin-left’,-elw , ‘margin-top’,-elh})
优点： 不管高低大小， 都能很正确的摆在中间， 不拖泥带水
缺点：代码复杂
总结：上面的方法各有千秋， 为了兼容我推荐最后一种， 如果不兼容， 我推荐table方法和transform(--)方法。 具体的使用还要看各位的需求
