响应 DIV 中心的绝对位置

Question

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

Answer 1

正如其他人所述，您需要添加

margin:-35px -35px 0 0;

使盒子正确居中。无论屏幕尺寸是多少，它永远不会真正居中于盒子的中间。这样做的原因是因为浏览器正在获取框的右上角，并将其放在框的中间。所以从某种意义上说，盒子是居中的。如果您将该框设置为left:50%;而不是right:50%;，那么该框将以左上角为中心。因此，要解决此问题，您需要使用宽度和高度的一半，因为这将等于盒子的中心。

另外，为了考虑到盒子脱离了红色盒子，我添加了overflow:auto;在需要时创建滚动条的功能。如果你不需要滚动条，那么你可以将其更改为overflow:hidden。如果您不想有任何突出，任何一种都可以。

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