html - IE 11 不会使 DIV 居中

Question

我使用下面的代码(改编自 this answer)偶然发现了 IE (11) 的奇怪行为。

居中的 div 在调整浏览器窗口大小时不会自动调整其位置。
它在 Google Chrome(使用 v31 和 v34 canary 测试)和 Firefox 26 中运行良好。

→ jsFiddle

<div id="outerWrapper">
    <div id="innerWrapper">
        Helllo World!<br />
        Longer text, longer text, longer text.
        yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy.
    </div>
</div>

#outerWrapper {
    display:inline-block;
    position:relative;
    left:50%;
}
#innerWrapper {
    position:relative;
    left:-50%;
}

我的系统:

• Windows 8.1 专业版 64 位
• IE 11(我还用 IE 7、8 和 9 模式测试了这个问题)

Answer 1

实际上，我稍微更改了您的代码以使其生效。

#outerWrapper {
    display:inline-block;
    position:absolute;
    left:50%;
    width:300px;
    margin-left:-150px;

}
#innerWrapper {
    position:relative;

}

不管怎样，它都会自动居中。(我在 ie11 上测试过)

编辑***另外，您可以根据需要更改宽度。我只是添加了一个随机较小的宽度所以我可以在我的小 mbp 大声笑上更好地看到它。

干杯