<div class="box">
<div class="small">small</div>
</div>
.box {
width: 300px;
height: 300px;
background: #ddd;
}
.small {
width: 100px;
height: 100px;
background: skyblue;
}
我们想让small盒子水平垂直居中实现如下效果,有以下几种方法:
absolute+margin实现
方法一:
.box {
position: relative;
width: 300px;
height: 300px;
background: #ddd;
}
.small {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
background: skyblue;
width: