title: Vertically centering faux-absolute-positioned (float: left) elements
body: <p>I'm trying to display a semitransparent grid of captioned images physically underneath a "lightbox"/overlay with my actual content in it. The font size in the document is generally set using <code>vw</code> units, so the height of the overlay changes depending on the screen resolution.</p>
  
  <p>I want to vertically center whichever happens to be smaller - the background image grid, or my overlay. If the <em>text</em> in the <em>overlay</em> is bigger (<code>font-size</code>-wise), I want the grid to vertically center relative to the <em>overlay</em>, but if the <em>grid</em> is bigger I want the overlay to vertically center relative to the <em>grid</em>.</p>
  
  <p>Initially I tried using <code>position: absolute</code> on the overlay which of course failed epically when I discovered the text in said overlay would overlap the content below the grid if its <code>font-size</code> got too big. I'm currently using <a href="http://alistapart.com/article/fauxabsolutepositioning" rel="nofollow">Faux Absolute Positioning</a> (<a href="http://d.alistapart.com/fauxabsolutepositioning/sapdemo-fivecol-liquid.html" rel="nofollow">demo</a>) which has resolved the overlap problem (the content is pushed down by whichever is bigger, my grid or the my lightbox, but I simply haven't been able to combine this neat trick with any of the float-vertical-centering demos/examples I've found on SO and elsewhere.</p>
  
  <p>The grid is currently a table (which took me quite a while to figure out!), but I could switch to some other method (a very long series of <code>float</code>s, for example) if absolutely necessary. (The grid is very arguably tabular data, in my opinion.)</p>
  
  <p>This is for a non-public document I'm sending somebody which I'm authoring using HTML5/CSS3 for rich layout/styling/formatting, so my rules of "strict semantics" are slightly (okay, quite) relaxed in this situation. (LaTeX->PDF would be impossible - constantly restarting <code>xpdf</code> to reload my PDF would progressively drive me so far up the wall I'd drill a hole in the ceiling with my head - and LibreOffice would probably choke on the ~150+ images I'm dealing with. And besides, the document is full of progressively accrued CSS3 awesomeness I would have to leave behind if I switched to PDF/ODT...)</p>