仅使用CSS将文本居中放置在绝对定位的父div的左上角

Question

我希望将文本垂直和水平居中放在通常位于绝对定位div左上角的像素上。这是html：

<div style="position:absolute; background-color:#EEEEEE; left:100px; top:100px;">
    <div style="position:relative; top:-50%; left:-50%;">
        My Centered Text
    </div>
</div>

JSFiddle：http://jsfiddle.net/fHJkE/1/

你可以看到html水平居中文本，但不是垂直居中。顶部：-50％＆＃39;造型似乎没有任何影响。

为什么在不离开的情况下忽略基于百分比的top会不被忽略？如何让它垂直居中？

编辑：

由于我的问题被误解，这就是我想要的：

Answer 1

Top不会被忽视。 Top属性，当百分比时，相对于父对象的高度。由于您的父母没有高度，top无法工作。除非你当然以像素为单位设置顶部。

Answer 2

试试这个DEMO 我删除了你的div并将其替换为<p> line-height :(父元素的高度）px; 将文本居中于中间;（垂直）

Answer 3

如果你真的想这样做，那么获得计算高度而不设置它的唯一方法是通过Javascript。尝试一下，它会起到作用：

var dv = document.getElementById("dv-align");
dv.style.top = "-" + (dv.offsetHeight/2) + "px";

http://jsfiddle.net/fHJkE/5/