css - 在较小的 div 内居中溢出 div

Question

我有一个 ID 为#container 的 div，我有另一个 div inside og 它的 ID 为#content。 #content div 的大小比#container div 大，我需要它在#container div 内部水平和垂直居中。

HTML

<div id="container">
    <div id="content">

    </div>
</div>

我试过的CSS是。

#container {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
#content {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

虽然例子中div的大小是静态值，但是高度会一直变化，所以需要动态的解决。

Answer 1

您可以绝对定位它们，然后使用 CSS3 转换将它们拖回原位。

JSfiddle Demo

CSS

#container {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color: #663399;
}
#content {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color: rgba(255,0,0,0.5);
}