CSS - Vertical align text in absolute positioned paragraph

Question

Before we start:
Please don't close this as a duplicate of another question. I just searched here on Stackoverflow without finding that exact case.

The closest is I believe this question. Still, the replies given there don't really work for me, I believe because the paragraph is set position: absolute;.

Thats the HTML:

<ul>
    <li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li>
</ul>

And the CSS:

li {
  position: relative;
  float: left;
  overflow: hidden;
}

img {
  width: 100%;
  vertical-align: middle;
}

p {
  background-color: rgba(255, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

span {
    background-color: rgba(0, 255, 0, .3);
    vertical-align: middle;
}

Fiddle: http://jsfiddle.net/DpVjZ/

vertical-align: middle; just bumps the text a tiny bit away from the top, but not really in the middle.
Setting the span position: absolute; and then applying top: 50%; and then margin-top: -x%; won't work because the height of the span is not known as it is dynamic content.
Although the linked question states that this is bad practice, I also tried the display: table-cell approach without any result. Please help me.

Answer 1

Without hard-coding an assumed height for the text or image, I (unfortunately) can't solve this in less than 3 layers:

1. Establish absolute positioning
2. Establish table layout
3. Establish table-cell layout and vertical-align: middle

Combining 1 and 2 seems to prevent height: 100% from working for reasons unknown to me. I think the rejection of table-cell layout seems to be a misappropriation of the old "don't use tables for layouts" meme; CSS is for layout so this is not misusing the element semantics. (Although unfortunately it requires semantically meaningless divs.)

<ul>
<li>
    <img src="http://www.placehold.it/300x200" />
    <div class="absolute">
        <div class="table">
            <div class="middle">
                <p><span>Lorem Ipsum</span>
                </p>
            </div>
        </div>
    </div>
</li>
</ul>


li {
    position: relative;
    float: left;
    overflow: hidden;
}
img {
    width: 100%;
}
.absolute, .table, .middle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.absolute {
    position: absolute;
}
.table {
    display: table;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
p {
    background-color: rgba(255, 0, 0, .3);
}
span {
    background-color: rgba(0, 255, 0, .3);
}

http://jsfiddle.net/svachalek/vTGxx/4/