垂直对齐不起铬

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

您忘了为position: absolute;添加#box，也忘了提供水平居中所需的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;
}

小提琴：http://jsfiddle.net/3ya0ewky/

Answer 2

我认为Chrome实际上是正确的。由于#box位于相对位置，因此top属性无效。如果您需要保持相对位置，可以使用margin-top属性调整其位置。否则使用绝对定位。

Answer 3

Chrome还可以。它没有考虑这条规则：if new ascii value <= 90 replace old letter by new letter else int diff = new ascii value - 90 while (new ascii value <= 90) { decrement diff value by 1 increment new ascii value by 1 } add remaining diff to 65 and set that as new ascii value replace old letter by new letter 。如果您未将父级高度设置为父级且子级项目为top: 50%，则无法以百分比声明top。

尝试here，只增加父亲的身高。它按预期工作