盒子水平垂直居中方法-原创手记-慕课网

盒子水平垂直居中方法

SOHO树叶 2017-10-20 15:57:32 浏览 5114

SOHO树叶

关注TA

手记 56

粉丝 61

获赞 656

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

11人推荐

发表评论