在FireFox中垂直对齐子元素与位置绝对和边距自动失败

Question

我正在尝试将子元素对齐在父容器中。 下面你看到我代码中的一个片段。只是让它工作的基础：

// HTML //

<div class="parent">
    <div>Parent</div>
    <div class="child"></div>
</div>


// CSS //

.parent { position: relative; }

.child {
    position: absolute;
    margin: auto;
    height: 60px;
    width: 40px;
    top: 0;
    right: 0;
    bottom: 0;
}

Chrome＆amp; IE

Firefox

View example on jsfiddle

如果您在Chrome或IE中查看此内容，则会在中间对齐。 但在Firefox中并非如此。 这是Firefox的错误，还是Chrome和IE做错了？

当你让孩子小于父母（身高）时，它也正确地在Firefox的中心对齐。只有当它更大时才出现这个问题。

Answer 1

从子项中删除bottom属性并将top设置为“-20px”。这被测试为在Firefox DE ^^中工作。您也可以-100％，我会说如果父高度发生变化会导致问题，但是如果父高度发生变化，则在子项上设置高度可能需要使用计算结果。

Answer 2

我认为我找到了解决此问题的方法，因此它在Chrome，IE和Firefox中的行为相同。

而不是：

top: 0;
bottom: 0;

我试过了：

top: 50%;
transform: translateY(-50%);

这似乎有效，即使在IE9中也是如此。

php