css中如何讓div盒子垂直水平居中
整體代碼如下：（僅供參考）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 200px;
height: 200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px; //將盒子向左平移盒子寬度的一半
margin-top:-100px; //將盒子向上平移盒子高度的一半
background-color: red; //給盒子加背景色，便於觀察，用完之后需要刪除背景色
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
注：給盒子添加背景是為了便於觀察效果，也可以選擇加有色邊框
1.首先給盒子box設置絕對定位（以瀏覽器左上角為零點）。
2.然后給left和topt各設置50%，讓盒子box的左上角在瀏覽器的正中心。
3.將盒子box向左平移盒子寬度的一半，再將盒子向上平移盒子高度的一半。
追加：還可以用css3的新特性translate(-50%,-50%)來實現（替換margin設置）