title: How to vertically align an image inside a div with dynamic height?
body: <p>What we have is a div that contains an image that a user uploads. This is the code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container_img"&gt;
      &lt;img height="120" width="150" src="[image name].jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div.container_img {
      overflow: hidden;
      width: 150px;
      height: 150px;
  }
  </code></pre>
  
  <p>Our problem is if the image the user uploads has a height smaller than 150px, there's a big space at the bottom. So we want to vertically align the image so that it doesn't look like it's just floating. </p>
  
  <p>I've tried searching for solutions on the net but I can't find one that works with dynamic images inside a DIV. Some solutions require that you know the dimensions of the image.</p>
  
  <p>Has anybody had this problem and solved it?</p>