title: Align image horizontally and vertically in a scrollable div
body: <p>A have an image and want to be able to zoom it in/out in a scrollable area with fixed size. This is easy, but if the image is smaller than the scrollable area, it should be centered both vertically and horizontally. I can't find a solution how to align it in the middle vertically. Popular solutions like <a href="https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height?rq=1">Vertically align an image inside a div with responsive height</a> or <a href="https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers">How to vertically center a div for all browsers?</a> do not work because of the scrollable area.</p>
  
  <p><a href="http://jsfiddle.net/smvyadnv/9/" rel="nofollow noreferrer">http://jsfiddle.net/smvyadnv/9/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner small"&gt;
          &lt;img src="http://lorempixel.com/g/500/300/nature/"&gt;&lt;/img&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="outer"&gt;
      &lt;div class="inner large"&gt;
          &lt;img src="http://lorempixel.com/g/500/300/nature/"&gt;&lt;/img&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>img {
      width: 100%;
  }
  .outer {
      height: 300px;
      width: 400px;
      overflow: scroll;
      text-align: center;
  }
  .inner {
      display: inline-block;
  }
  .inner.small {
      width: 250px;
      height: 150px;
  }
  .inner.large {
      width: 500px;
      height: 300px;
  }
  </code></pre>