title: Vertically Center Responsive Image
body: <p>I am wondering if there is a simple way to vertically center a responsive image.  </p>
  
  <p>Please refer to the following jsFiddle: <a href="http://jsfiddle.net/persianturtle/yawTb/1/">http://jsfiddle.net/persianturtle/yawTb/1/</a></p>
  
  <p>Basic HTML:</p>
  
  <pre><code>&lt;img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"&gt;
  </code></pre>
  
  <p>Basic CSS:</p>
  
  <pre><code>.mobile-title-size {
  position: absolute;
  top: 2.5%;
  left: 6%;
  width: 70%;
  max-width: 300px;
  </code></pre>
  
  <p>}</p>
  
  <p>This is the mobile header that uses the same image that is displayed on tablet and desktop viewports. Since the image is already being loaded anyway, I am looking to use this same image, resize it smaller and vertically align it so that I can use one image for all viewports.</p>
  
  <p><strong>The Problem:</strong> On browser resize, the image does get smaller, but it does not vertically align in the center.</p>
  
  <p><strong>The Goal:</strong> Even though the width overlaps badly in this example, it is not an issue on my site. The goal is only to vertically center the image as the browser resizes.</p>
  
  <p>I am okay with using a javascript/jQuery solution but of course, simple CSS is preferred.</p>
  
  <p>Any help is greatly appreciated!</p>