title: Centering a dynamically sized div inside another div that is centered on the page
body: <p>All I want to do is center some divs on the page. The outer one is a fixed size and is centered horizontally via <code>margin: 0 auto</code>. Inside that div I have a couple images side by side inside another div that wraps to their size. I want to center <em>that</em> div both vertically and horizontally inside the outer div.</p>
  
  <p>It seems like a simple enough thing to want to do, no?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Let me bit a bit clearer as to what exactly the problem is. I'd love to use the <code>display: table-cell</code> trick to enable <code>vertical-align: middle</code> but the problem is that when I do this, the div shrinks down to the size of its content, thus not offering any space for centering at all, and that div is just stuck up in the top left corner of the parent. I need my <code>display: table-cell</code> block to fill up the available space of the containing div so it has room to center its contents.</p>
  
  <p><strong>Update 2: Solved!</strong></p>
  
  <p>Turns out the problem was that I didn't have the <code>display: table-cell</code> block contained in a div that was set to <code>display: table</code>. I'm not entirely sure how <code>display: table</code> differs from <code>display: block</code>, but it's apparently a necessary step. It appears to be working now!</p>