html - 仅使用 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 将文本水平居中，但不是垂直居中。 “top:-50%”样式似乎没有任何影响。

为什么基于百分比的顶部被忽略，而左侧却没有？我该怎么做才能使其垂直居中？

编辑:

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

Answer 1

Top 没有被忽略。顶部属性(百分比)是相对于父对象的高度。由于您的 parent 没有高度，因此 top 将不起作用。当然，除非您以像素为单位设置顶部。