html - 谷歌浏览器不理解 top :50% unlike other browsers

Question

在我的示例中，Google Chrome 36 似乎已损坏并且无法理解 top:50%。

IE 11、Opera 12.17 和 Firefox 31 运行良好。 Chrome 和 Safari 坏了(我猜其他 WebKit/KHTML 浏览器也坏了)。

<div class="box_outer">
    <div class="box_inner">
        <div class="box">
                <h1>Hello</h1>   
        </div>
    </div>
</div>
<style>
.box_outer {
    bottom: 0px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
.box_inner {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    position: relative;
}
.box {
    position: absolute;
    left: -220px;
    width: 400px;
    top: -220px;
    height: 400px;
    background-color: red;
}
</style>

我知道我可以做到以下几点:

.box_outer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;  
}

但这不是解决问题的方法，只是另一种方法。

如何通过最少的更改为 Chrome 修复它？

You can test it on JSBIN here

Answer 1

好的，这是解决方法。对我来说，这似乎是 Webkit 浏览器中的一个错误。

.box_outer {
    bottom: 0px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
.box_inner {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    position: absolute; /* INSTEAD OF relative */
}
.box {
    position: absolute;
    left: -220px;
    width: 400px;
    top: -220px;
    height: 400px;
    background-color: red;
}