中心溢出div在较小的div内

Question

我有一个带有#container id的div，我在另一个div里面有#content的id。 #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);
}