如何让一个盒子在页面中垂直居中

方法一

最常规的方法

#dv{
width:200px;
height:200px;
background-color:hotpink;
position:absolute;  /*父元素需要相对定位*/
top:50%;
left:50%;
margin-top:-100px;  /*自身二分之一的高*/
margin-left:-100px; /*自身二分之一的宽*/
}

方法二

#dv{
width:200px;
height:200px;
background-color: hotpink;
margin:auto;
position:absolute;     /*父元素需要相对定位*/
left:0;
right:0;
top:0;
bottom:0;
}

方法三

使用css3的样式，注意兼容哦~

 #dv{
        width:200px;
        height:200px;
        background-color:hotpink;
        position:absolute;        /*父元素需要相对定位*/
        top:50%;                   /*移动父元素的一半*/
        left:50%;
        transform: translate(-50%,-50%);
        /*2D变换位移，往回移动的是自身的一半*/
        }