title: Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?
body: <p>If I have a fixed sized container div, and an unknown sized image, how do I horizontally and vertically center it?</p>
  
  <ul>
  <li>using pure css</li>
  <li>using JQuery if css can't do it</li>
  </ul>
  
  <p><a href="https://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div">This answer makes sense</a> for <em>fixed width</em> images, but not variable ones.</p>
  
  <p>Something like this structure (I have in mind <a href="http://net.tutsplus.com/" rel="nofollow noreferrer">item renderers similar to these in the list</a>, but where the image on the left wouldn't always be the same size:</p>
  
  <pre><code>&lt;ul id="gallery"&gt;
      &lt;li id="galleryItem1"&gt;
          &lt;div class="imageContainer"&gt;
              &lt;img src="gallery/image1"/&gt;
          &lt;/div&gt;
          &lt;p&gt;Some text to the right...&lt;/p&gt;
          &lt;!-- more stuff --&gt;
      &lt;/li&gt;
      &lt;li id="galleryItem2"&gt;
      &lt;!-- ... --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks for the help!</p>