**如何水平垂直居中div**
面试中经常会有div的居中问题，也是工作中常见的问题，今天来整理几种居中的方法。
1.利用绝对定位和4边距为0.
.div1{
width:800px；
height:50px;
background:green;
position：absolute;
top:0;
left:0;
right:0;
margin:auto;
}
<div class="div1">div1水平垂直都居中<div>
效果如图示
2.利用绝对定位和transform属性
.div2{
width:800px；
height：50px;
background:red;
position：absolute;
top:50%;
left:50%;
transform:translate(-50%，-50%)；
}
<div class="div2>div2水平垂直都居中<div>
效果如图示
3.利用绝对定位和计算出的margin，与宽高有关，宽高变化，margin需要重新计算。
. div3{
width:800px；
height：50px;
background:yellow;
position：absolute;
margin-top:-25px;
margin-left:-400px；
}
<div class="div3>div3水平垂直都居中<div>
效果如图示
