title: Vertically align an image inside a div with responsive height
body: <p>I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="responsive-container"&gt;
      &lt;div class="dummy"&gt;&lt;/div&gt;
      &lt;div class="img-container"&gt;
          &lt;IMG HERE&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.responsive-container {
      position: relative;
      width: 100%;
      border: 1px solid black;
  }
  
  .dummy {
      padding-top: 100%; /* forces 1:1 aspect ratio */
  }
  
  .img-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  </code></pre>
  
  <p>How can I vertically align the IMG inside the container? All my images have variable heights and the container can't have a fixed height/line height because it's responsive... Please help!</p>