为什么在相对定位没有明确高度的元素时会忽略'top'属性？

Question

我不是在寻找一个以中心元素为中心的不同解决方案;我正在寻找解释为什么此处提供的解决方案不起作用。

考虑以下jsFiddle：

• http://jsfiddle.net/6Xyq8/2/

以下是HTML / CSS代码供参考：

HTML

<div class='outer'>
    <div class='middle'>
        <div class='inner'>
            Text should be centered
        </div>
    </div>
</div>

CSS

.outer {
    position: absolute;
    left: 200px;
    top: 50px;
    width: 100px;
    height: 100px;
    border: 2px solid #00f;
    border-radius: 10px;
}

.middle {
    position: absolute;
    left: 50%;
    top: 50%;
    line-height: 1em;
}

.inner {
    position: relative;
    left: -50%;
    top: -50%;
    width: 5em;
}

Chrome和Firefox中的元素检查器告诉我，middle和inner都有正确的宽度和高度，而且水平定位确实正常，但是由于某种原因，top: -50%规则被忽略。但是，只有当.middle没有明确的高度时才会被忽略 - 如果添加一个，它就可以工作，即使有效高度与它已经相同。这是为什么？

Answer 1

这是the old CSS 2 specification（强调我的）中指定的行为：

  

<percentage>

     

偏移量是包含块宽度的百分比（对于＆＃39;左＆＃39;或＆＃39;右＆＃39;）或高度（对于＆＃39; top＆＃39;和＆＃39;底部＆＃39）。对于＆＃39; top＆＃39;和＆＃39; bottom＆＃39;，如果未明确指定包含块的高度（即，它取决于内容高度），百分比值将被解释为＆＃39; auto＆＃39;。< /强>

在current CSS 2.1 specification那个限制was removed中，我现在说这是一个跨浏览器的错误。 Firefox有一个非常古老的错误here由于原始规范而被标记为无效;并且newer bug可以使用一些投票来获得更多关注。