title: CSS: how to vertically and horizontally align an image?
body: <p>My page has space for an image that can be, say, a maximum 100x100 image. Users can upload any image dimension and the web application will resize it, maintaining aspect ration, to 100x100. So, it's possible for images to be resized to, say, 75x100 or 100x75, etc.</p>
  
  <p>Regardless of the resized image's dimension, I want it to appear vertically and horizontally centered in its allocated space on the web page. How do I do this in CSS? Will I need a containing div, like this:</p>
  
  <pre><code>&lt;div class="image_container"&gt;
       &lt;image src="http://placehold.it/100x100/" height="100" width="100" alt=""/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Anyway, sample CSS would be helpful. Thanks!</p>