Vertically Align Div with Absolute Position - html

Question

I am trying to vertically align a div (the "p" element in this example but it could be anything a div a link, an image, etc.) which needs to have its position property set to absolute. I followed this example: http://davidwalsh.name/table-cell-position-absolute
But I can get it to work. Here is the code:
<div style="width: 400px; height: 48px; background-color: #EEE; margin: 0 auto;">
<div style="display: table; position: relative; border: 1px solid blue; width: 100%; height: 100%;">
<div style="display: table-cell; border: 2px solid green;">
<div style="position:relative; overflow: auto; height: 100%;">
<p style="position:absolute; bottom:0; right:0; font-size: 18px; color: black; border: 1px solid orange;">VERTICALLY CENTER ME PLEASE!</p>
</div>
</div>
</div>
</div>
And the jsfiddle: http://jsfiddle.net/bqm7wudc/2/
Could someone suggest a solution please?

Answer 1

I actually sorted the problem that way:
<div style="display: table; position: relative; border: 1px solid red; width: 960; height: 48px; margin: 0 auto;">
<ul style="display: table; vertical-align: middle; border: 1px solid orange; padding: 0px; position:absolute; left: 700px; margin: 0; height: 100%;">
<li style="display: table-cell; vertical-align: middle; font-size: 20px; font-weight: 900; padding-right: 20px;">toto</li>
<li style="display: table-cell; vertical-align: middle; font-size: 20px; font-weight: 900; padding-right: 20px;">titi</li>
</ul>
</div>
The text is defined as the content of a list. The ul element is itself a table (positioned using the absolute mode), while the li elements are table cells. This seems to work.
Updated fiddle: http://jsfiddle.net/bqm7wudc/7/