html - 垂直对齐 Div 与绝对位置

Question

我正在尝试垂直对齐一个 div(本例中的“p”元素，但它可以是任何 div、链接、图像等)，需要将其位置属性设置为绝对。我按照这个例子:http://davidwalsh.name/table-cell-position-absolute

但我可以让它工作。这是代码:

<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>

还有 jsfiddle:http://jsfiddle.net/bqm7wudc/2/

有人可以提出解决方案吗？

Answer 1

我实际上是这样解决问题的:

<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;"><a href="#">toto</a></li>
            <li style="display: table-cell; vertical-align: middle; font-size: 20px; font-weight: 900; padding-right: 20px;"><a href="#">titi</a></li>
        </ul>
</div>

文本被定义为列表的内容。 ul 元素本身是一个表格(使用绝对模式定位)，而 li 元素是表格单元格。这似乎有效。

更新 fiddle :http://jsfiddle.net/bqm7wudc/7/