title: Center image vertical in div with overflow hidden
body: <p>I think this is a classic one. I found a lot of similar questions but no answer.</p>
  
  <p>I want to vertical center any image of any not-known height into a div with <code>overflow:hidden</code></p>
  
  <p>This is what I have right now:</p>
  
  <pre><code>.outer {
      padding-top:49px;
      height:49px;
      width:280px;
      overflow:hidden;
      background-color:yellow;
  }
  .outer .inner {
      float:left;
      position:relative;
      display:block;
      background-color:blue;
  }
  .outer .inner img {
      position:relative;
      top:-50%;
      width:280px;
      height:auto;
      border:0px; 
      display:block; 
  }
  </code></pre>
  
  <p>So the <code>.inner</code> is pushed to the center of the <code>.outer</code> by <code>padding-top</code>, so I get a "window" of 2 x 49px = 98px height. Then the <code>img</code> I thought would be pushed out 50% from the <code>.inner</code> height but for some reason i get a different number…</p>
  
  <p>Does anybody know what I am doing wrong?</p>
  
  <p>Thank you in advance!</p>