html - 在 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 和 IE

火狐

View example on jsfiddle

如果您在 Chrome 或 IE 中查看它，它会居中对齐。但在 Firefox 中却不是。这是 Firefox 的错误，还是 Chrome 和 IE 做错了？

当您使子项小于父项(在高度上)时，它在 Firefox 中也正确地居中对齐。只有当它更大时才会出现这个问题。

Answer 1

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