DIV中心的响应绝对位置

如何使蓝色框始终显示在红色框的中间。当我调整窗口的大小时，蓝色盒子的位置是错误的。在线样本：http://jsfiddle.net/NVjPF/ 。谢谢DIV中心的响应绝对位置

<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%; 
    }

来源

2013-03-04 olo

如前所述由别人，你需要添加

margin:-35px -35px 0 0;

为框中正确居中。不管屏幕尺寸是什么，它都不会真正居中在盒子中间。原因是因为浏览器正在取出盒子的右上角，并将其放在盒子的中间。所以从某种意义上说，这个盒子是居中的。如果您将该框设置为left:50%;而不是right:50%;，那么该框将位于左上角的中央。所以要解决这个问题，你需要占用一半的宽度和高度，因为这将等于盒子的中心。

此外，为了解决突破红色框的框，我添加了overflow:auto;以在需要时创建滚动条。如果您不需要滚动条，则可以将其更改为overflow:hidden。如果你不想要任何突起，任何一个都可以工作。

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

来源

2013-03-04 04:32:23

您可以使用负边距来说明差异。在这种情况下，您可以添加：

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

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

来源

2013-03-04 04:00:58

试试这个。基本上，您将盒子移到父母的一半，然后使用等于盒子宽度和高度一半的负边距将其移回死点。

#box2 { 
display:block; 
background:blue; 
position:absolute; 
height:70px; 
width:70px; 
right:50%; 
top:50%; 
margin:-35px -35px 0 0; 
}

来源

2013-03-04 04:01:52

试一下，很适合我：

#box2 {transform: translate(-50%, 0%);}

来源

2016-01-29 10:26:07 Mike

DIV中心的响应绝对位置

回答

相关问题