DIV垂直居中

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

【推广】免费学中医，健康全家人

原文地址：https://www.cnblogs.com/ecosu/p/5335901.html