title: Vertical center something, inside an IMG
body: <p>Sorry for the messy code:</p>
  
  <pre><code>&lt;div style="position: relative;"&gt;
      &lt;div style="position: absolute; top: 50%;"&gt;This should be vertically centered&lt;/div&gt;
      &lt;img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" style="visibility: hidden; position: absolute;"; /&gt;
    &lt;img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/a5as2/" rel="nofollow">http://jsfiddle.net/a5as2/</a></p>
  
  <p>as you can see, the text is almost centered vertically - but as you will shrink the width, you will see thats not 100% precise. What to fix now&lt;</p>