Larger div centered inside smaller div

Question

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.

Answer 1

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