关于div居中问题
2022-08-19 本文已影响0人
GuiiLiin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
<div>这是底部</div>
</body>
</html>
正常设置一个div的宽高时 浏览器默认该div的margin-left为0margin-right为浏览器的宽度减去div的宽度
如果我们去设置margin: 0 auto 将div的上下margin设置为0 左右的margin设置为auto的时候 浏览器会默认将（浏览器的宽度减去div的宽度）/2 去平均分到左右两边的margin 就可以将我们的div元素居中了
