title: Vertical align block level element inside a block level element
body: <p>I need to center align images (variable width and height) inside block level elements of fixed width and height. The css markup looks something like this:</p>
  
  <pre><code>&lt;div style="float: left; width: 100px; height: 100px;"&gt;&lt;img src="yada" width="50" height="60"&gt;&lt;/div&gt;
  &lt;div style="float: left; width: 100px; height: 100px;"&gt;&lt;img src="yada" width="60" height="50"&gt;&lt;/div&gt;
  &lt;div style="float: left; width: 100px; height: 100px;"&gt;&lt;img src="yada" width="75" height="75"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The point is, that the images align themselves to the top right corners of the container div. I want them to be centered, both horizontally and vertically. I have tried setting the img tag style as follows:</p>
  
  <pre><code>img {
  display: block;
  margin: auto;
  }
  </code></pre>
  
  <p>This center-aligns the img horizontally but not vertically. I need both so that the gallery page looks neatly aligned. I need to avoid using tables at all cost although this produces the result exactly as I need. I need a portable, hack-less CSS solution.</p>