SOHO树叶
2017-10-20 15:57:32浏览 5143
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平垂直居中方法</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.box01{width: 200px; height: 200px; background:blue; color:#fff;
position:absolute;
left: 50%; top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.box02{background:#f10180; color:#fff; font-size:30px; padding: 20px;
position:absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box01">已知知宽高的小水平垂直都居中盒子</div>
<div class="box02">未知宽高的小盒子水平垂直都居中</div>
</body>
</html>