如何让定位居中正中间

Posted 2020-10-13 晨曦橙

 

如上所示，我们需要中间定位上去的绿色盒子居于盒子的正中间

html代码：

　　

<div class="end">
<div class="to-center"></div>

</div>

 

 

css代码：

　　

.end{
width: 500px;
height:500px;
border:1px solid red;
position: relative;
}
.to-center{
width: 200px;
height:200px;
background:green;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

 

先使用定位，将这个绿色盒子定位到离上面50%，离左边50%的位置上，然后再使用transform 优雅降级   将盒子多移出去的一半大小减去即可完成。