CODEWITHSUNDEEP
css
Rasmus Nørskov
Rasmus Nørskov

Reputation: 474

center overflowing div inside smaller 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.

illustration of the issue

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.

Upvotes: 3

Views: 3342

Answers (1)

Paulie_D
Paulie_D

Reputation: 115374

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

Upvotes: 5

Related Questions