css - 较大的 div 在较小的 div 内居中

Question

我在另一个 div (#edit) 中有一个 div (#containment)。外部 div 较小。内部 div 的大小将由一些 jQuery 代码更改。

我想让内部 div 始终位于外部 div 的中心。

<div id="edit"><div id="containment"></div></div>

#edit {
    width:200px;
    height:200px;
    overflow:visible;
    margin-top:100px;
    background:gray;
}
#containment {
    width:500px;
    height:500px;
    opacity:0.5;
    background:red
}

fiddle

我该怎么做？

Answer 1

Updated Fiddle

#containment{
    width:500px; height:500px; opacity:0.5;  background:red;
    position : absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

通过使用transform，您不再依赖父容器的宽度和高度。参见 caniuse用于浏览器支持。

属性 left 和 top 将元素的左上边缘设置为父元素的中心。通过使用 translate，它将 X 和 Y 位置向后移动其自身尺寸的 50%。

您可以在 developer.mozilla.org - transform 上找到有关transform 的更多信息