如何使蓝框始终显示在红色框的中间。当我调整窗口大小时,蓝色框处于错误的位置。 在线样本:http://jsfiddle.net/NVjPF/ 。感谢
<div id="box1">
<div id="box2"></div>
</div>
#box1{
display: block;
background:red;
background-size: 100%;
position: relative;
padding-bottom: 60%;
}
#box2{
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
}
答案 0 :(得分:3)
正如其他人所说,你需要添加
margin:-35px -35px 0 0;
使框正确居中。屏幕尺寸无关紧要,它永远不会真正居中于盒子的中间位置。原因是因为浏览器占据了框的右上角,并将其放在框的中间。所以在某种意义上,盒子是居中的。如果您要将框设置为left:50%;
而不是right:50%;
,则框将位于左上角的中心位置。所以要解决这个问题,你需要一半的宽度和高度,因为这将等于盒子的中心。
另外,为了解释红框中的框突破,我添加了overflow:auto;
以在需要时创建滚动条。如果您不想要滚动条,则可以将其更改为overflow:hidden
。如果你不想要任何突出,任何一个都可以工作。
答案 1 :(得分:2)
您可以使用负边距来说明差异。在这种情况下,您可以添加:
margin-right: -35px;
margin-top: -35px;
35px
源于内部元素大小的一半。有关现场演示,请参阅http://jsfiddle.net/NVjPF/1/。
答案 2 :(得分:2)
试试这个。基本上,你将盒子移到父母内部的一半,然后使用等于盒子宽度和高度的一半的负边距将它带回死角。
#box2 {
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
margin:-35px -35px 0 0;
}
答案 3 :(得分:1)
试试这个,对我有用:
#box2 {transform: translate(-50%, 0%);}