较大的div位于较小的div内

Question

我#containment在另一个div(#edit)里面有一个div().外部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
}

小提琴

我怎样才能做到这一点？

Answer 1

更新小提琴

#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%.

您可以transform在developer.mozilla.org上找到更多信息- 转换