title: Center horizontally and vertically an absolute positioned element without knowing the size
body: <p>I don't even know if this is possible using CSS only, but I have to ask.</p>
  
  <p>PLEASE, read the specs before you provide an answer, accordingly. Thank you!</p>
  
  <p>My markup:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;img src="http://placehold.it/350x150"&gt;
      &lt;p&gt;Some text random size&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Obviously, .wrapper will have the height of my img element, if that's a block.
  Then, I need the p element to be centered horizontally and vertically inside the wrapper. I don't have a fixed width or height for the p element.</p>
  
  <p>So, regardless paragraph size or even image size, it should be vertically and horizontally aligned, as is shown here <a href="http://i.imgur.com/phiR48H.png" rel="noreferrer">http://i.imgur.com/phiR48H.png</a> or here <a href="http://i.imgur.com/Xvdt42j.png" rel="noreferrer">http://i.imgur.com/Xvdt42j.png</a>.</p>
  
  <p>If I set absolute position on the paragraph, it will not vertically align, because I cannot set negative margin if I don't know paragraph height.
  I was thinking about table and table-cell (vertical-align: middle;), but I only have 1 cell. Any thoughts?</p>
  
  <p>Added fiddle: <a href="http://jsfiddle.net/f3x7977z/" rel="noreferrer">http://jsfiddle.net/f3x7977z/</a></p>
  
  <p>It's important that the provided solution have backwards compatibility, in special in <strong>IE8+</strong>.</p>
  
  <p>Any suggestions on extra wrappers, for the sake of the final result, are welcome!</p>