较小的div内溢出div的中心 [英] center overflowing div inside smaller div

问题描述

我有一个ID为#container的div，在它的内部还有另一个div为ID为#content的ID. #content div的大小比#container div大，我需要在#container div内水平和垂直地将其居中.

I have a div with the id of #container, I have another div inside og it with the id of #content. The #content div has a larger size than the #container div, and I need it centeret horizontally and vertically inside of the #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的大小是静态值，但高度始终在变化，因此需要动态解决方案.

Though the sizes of the divs in the example are static values, the height will be changing all the time, so a dynamic solution is needed.

推荐答案

您可以对其进行绝对定位，然后使用CSS3变换将其拖回原位.

You can position them absolutely and then use CSS3 transforms to drag them back into place.

JSfiddle演示

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);
}

这篇关于较小的div内溢出div的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！