标签:
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和right各设置50%,让盒子box的左上角在浏览器的正中心。
3.将盒子box向左平移盒子宽度的一半,再将盒子向上平移盒子高度的一半。
标签:
原文地址:http://www.cnblogs.com/zhaoliu100125/p/5372403.html