如何让定位居中正中间

Posted 晨曦橙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让定位居中正中间相关的知识,希望对你有一定的参考价值。

 

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

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 优雅降级   将盒子多移出去的一半大小减去即可完成。

 

以上是关于如何让定位居中正中间的主要内容,如果未能解决你的问题,请参考以下文章

怎么让一个DIV绝对定位到页面的正中间

如何使用 flexbox 让中间元素始终完美居中 [重复]

如何让绝对定位的盒子进行水平居中

让3个DIV并排,但是要让中间的DIV居中,旁边2个平均分配剩余宽度

scss Sass mixin用于定位元素绝对中间/居中垂直/居中水平

如何将未知宽度的绝对定位内容居中?