center overflowing div inside smaller div

css

Solution

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

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

Problem

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> ``` The CSS I have tried is. ``` #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; } ``` 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.

Original source