0

如何使蓝色框始终显示在红色框的中间。当我调整窗口大小时,蓝色框的位置错误。在线示例: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%;
  }
4

4 回答 4

5

正如其他人所说,您需要添加

margin:-35px -35px 0 0;

使框正确居中。屏幕大小无关紧要,它永远不会真正居中到盒子的中间。这样做的原因是因为浏览器占据了框的右上角,并将其放在框的中间。所以在某种意义上,盒子是居中的。如果您将框设置为left:50%;而不是right:50%;,则框将以左上角为中心。所以要解决这个问题,你需要一半的宽度和高度,因为这将等于盒子的中心。

此外,考虑到盒子脱离红色盒子,我添加overflow:auto;了在需要时创建滚动条。如果您不想要滚动条,则可以将其更改为overflow:hidden. 如果您不想要任何突出,任何一个都可以工作。

http://jsfiddle.net/burn123/NVjPF/3/

于 2013-03-04T04:32:23.717 回答
2

您可以使用负边距来解释差异。在这种情况下,您可以添加:

margin-right: -35px;
margin-top: -35px;

35px源于内部元素大小的一半。有关现场演示,请参见http://jsfiddle.net/NVjPF/1/

于 2013-03-04T04:00:58.757 回答
2

尝试这个。基本上,您将盒子移动到父对象内部的一半,然后使用等于盒子宽度和高度一半的负边距将其带回死点。

#box2 {
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
margin:-35px -35px 0 0;
}
于 2013-03-04T04:01:52.240 回答
2

试试看,对我来说效果很好:

#box2 {transform: translate(-50%, 0%);}
于 2016-01-29T10:26:07.207 回答