首页手记盒子水平垂直居中方法

盒子水平垂直居中方法

标签：

Html/CSS Html5 CSS3

<!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>

点击查看更多内容