.div1{

          width:400px;

          height:400px;

          border:#CCC 1px solid;

          background:#99f;

          position:absolute; left:50%; top:50%;/*绝对定位*/

          transform: translate(-50%,-50%); 
/*translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动*/

} 

<div class="div1"></div>        

 .div2{

            width:400px;

            height:400px;

            border:#CCC 1px solid;

            background:#99f;

            position: absolute;

            left:0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

}

<div class="div2"></div>                            

 .div3{

　　　　width:400px;

　　　　height:400px;

　　　　border:#CCC 1px solid;

　　　　background:#9f9;

　　　　position: absolute;

　　　　left: 50%;

　　　　top:50%;

　　　　margin-left:-200px;

　　　　margin-top: -200px;

}

<div class="div3"></div>