DIV垂直居中

HTML：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="box">我要垂直居中</div>
</body>
</html>

CSS：

html,body{
height:100%;
width:100%;
}
#box{
width:200px;
height:200px;
position:relative;
top:50%;
margin:-100px auto;
background-color:red;
}

效果：

主要是用到相对定位。同时设置了top和margin

 

posted @ 2016-03-30 09:37  Beta3.0  阅读(144)  评论(0)  编辑  收藏  举报