码迷,mamicode.com
首页 > Web开发 > 详细

css 中让盒子垂直水平居中

时间:2016-04-09 20:34:18      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

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向左平移盒子宽度的一半,再将盒子向上平移盒子高度的一半。

css 中让盒子垂直水平居中

标签:

原文地址:http://www.cnblogs.com/zhaoliu100125/p/5372403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!