Larger div centered inside smaller div

css

Solution

Updated Fiddle

#containment{
    width:500px; height:500px; opacity:0.5;  background:red;
    position : absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

By using `transform`, you're not dependent of the width and height from the parent container. See caniuse for browser support.

The properties `left` and `top` are setting the top-left-edge of the element to the center of the parent. By using `translate`, it shifts the X- and Y-Position back by 50 percent of its own dimensions.

You can find more information about `transform` on developer.mozilla.org - transform

Problem

I have a div (`#containment`) inside another div (`#edit`). The outer div is smaller. The inner div's size will be changed by some jQuery code. I want to make the inner div always centered inside of the outer div. ``` <div id="edit"><div id="containment"></div></div> #edit { width:200px; height:200px; overflow:visible; margin-top:100px; background:gray; } #containment { width:500px; height:500px; opacity:0.5; background:red } ``` fiddle How can I do this?

Original source