用 position 实现上下左右居中
<div class="father">
<div class = "child1"></div>
</div>
.father {
border: 10px solid black;
overflow: hidden;
height: 500px;
}
.child1 {
width: 100px;
height: 100px;
padding: 10px;
background-color: blanchedalmond;
}
上面的代码显示图如下
给 child1 子盒子添加相对定位如下
.child1 {
width: 100px;
height: 100px;
padding: 10px;
background-color: blanchedalmond;
//添加定位
left: 50%;
top: 50%;
position: relative;
margin-left: -50px;
margin-top: -50px;
}
实现上下左右居中如下
下面是截取添加定位的部分
1、设置相对定位
2、使得相对定位的左边界和上边界在浏览器的中间,也就是 50%,此时相当于边界线位于上下左右居中
3、让盒子向左边和向上面移动盒子的一半大小,也就是 50px