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

Posted 2023-03-06

【中文标题】使用绝对位置和边距自动垂直对齐子元素在 FireFox 中失败

【英文标题】：Vertical aligning a child element with position absolute and margin auto fails in FireFox

【发布时间】：2015-07-23 13:48:51

【问题描述】：

我正在尝试对齐父容器内的子元素。 下面你会从我的代码中看到一个 sn-p。只是使其工作的基础知识：

// 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 中也正确对齐在中心。只有当它更大时才会出现这个问题。

【问题讨论】：

好吧，你确实有冲突的价值观。 .child 不能同时是 top: 0 和 bottom: 0，除非孩子的身高与父母的身高完全相同。例如你有1米高。同时将手放在天花板上，脚放在 2 米高房间的地板上……不允许拉伸。

@MarcB - 这是在相对定位的容器中垂直居中绝对定位元素的常用技术，假设边距设置为自动。

【参考方案1】：

从子元素中移除底部属性并将顶部设置为“-20px”。这被测试为在 Firefox DE 中工作 ^^。您也可以 -100%，我会说如果父级高度发生变化，这会导致问题，但是如果父级高度发生变化，则在子级上设置高度，您可能必须使用计算。

【讨论】：

我知道如何让它工作，这不是问题。我想知道正确的行为是什么。

那么在这种情况下回答为什么，作为评论提到 top:0 和 bottom:0 是冲突的。有人提到垂直对齐，但您设置了固定高度。

【参考方案2】：

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

代替：

top: 0;
bottom: 0;

我试过了：

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

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

View example on jsfiddle