title: Larger div centered inside smaller div
body: <p>I have a div (<code>#containment</code>) inside another div (<code>#edit</code>).  The outer div is smaller.  The inner div's size will be changed by some jQuery code.</p>
  
  <p>I want to make the inner div always centered inside of the outer div.</p>
  
  <pre><code>&lt;div id="edit"&gt;&lt;div id="containment"&gt;&lt;/div&gt;&lt;/div&gt;
  
  #edit {
      width:200px;
      height:200px;
      overflow:visible;
      margin-top:100px;
      background:gray;
  }
  #containment {
      width:500px;
      height:500px;
      opacity:0.5;
      background:red
  }
  </code></pre>
  
  <h2><a href="http://jsfiddle.net/fzAge/" rel="noreferrer">fiddle</a></h2>
  
  <p>How can I do this?</p>