Vertically centre multi-line text over an image
<p>I'm trying to get some caption text to be vertically positioned in the middle of an image. I've tried a whole bunch of different techniques using <code>table-cells</code> and what-not, but can't seem to get it to work!</p>

<p>I have the a <code>&lt;li&gt;</code> with a nested <code>&lt;a&gt;</code> and nested <code>&lt;img&gt;</code> &amp; <code>div.caption-wrapper</code>. I've sized the caption wrapper to be the same size as the <code>&lt;img&gt;</code> but can't seem to get the <code>div.caption-wrapper</code> to position itself over the <code>&lt;img&gt;</code></p>

<p>Obviously I need to get on top of the basics, but <a href="https://jsfiddle.net/oldo_nicho/fr1j44yj/" rel="nofollow">here is a fiddle</a> of where I'm at. Any chance someone could suggest a solution?</p>