div自动适应浏览器窗口水平和垂直居中

 .box {
width: 400px;
height: 200px;
background: #ccc;
position:absolute;
left:50%;
margin-left:-200px;
top:50%;
margin-top:-100px;

}

原理就是:先用left:50%;top:50%让这个box的左上角居于页面的正中,然后用margin-left、margin-top使box向左向上移动它自身宽高的一半。