css 中让盒子垂直水平居中
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设置）
