html - 垂直对齐不适用于 chrome

Question

我有这个用于垂直对齐框的简单标记和 CSS

它在 FF 中运行良好并且符合预期，但它不适用于 Chrome。关于为什么会发生这种情况以及如何解决它的任何想法？

HTML:

<div id="container">
    <div id="box"></div>
</div>

CSS:

#container
{
    position: fixed;
    top: 25px;
    right: 25px;
    bottom: 25px;
    left: 25px;
    border: 1px solid red;
}

#box
{
    height: 150px;
    margin: -75px auto 0;
    position: relative;
    text-align: center;
    top: 50%;
    width: 75%;
    border: 1px solid blue;
}

fiddle : http://jsfiddle.net/5fLr00tf/

Firefox 输出:

Chrome 输出:

Answer 1

你忘记为#box添加position: absolute;，你也忘了给left: 12.5%;，这是需要水平居中:

#box {
    height: 150px;
    margin: -75px auto 0;
    position: relative;
    text-align: center;
    top: 50%;
    left: 12.5%;
    width: 75%;
    border: 1px solid blue;
    position: absolute;
}

fiddle :http://jsfiddle.net/3ya0ewky/