我正在尝试对齐父容器内的子元素。 下面你可以看到我的代码片段。只是让它工作的基础知识:
// 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
火狐
如果您在 Chrome 或 IE 中查看它,它会居中对齐。 但在 Firefox 中却不是。 这是 Firefox 的错误,还是 Chrome 和 IE 做错了?
当您使子项小于父项(在高度上)时,它在 Firefox 中也正确地居中对齐。只有当它更大时才会出现这个问题。
最佳答案
从子项中删除 bottom 属性并将 top 设置为“-20px”。这被测试为在 Firefox DE 中工作 ^^。你也可以 -100%,我想说如果父高度发生变化,这会导致问题,但是如果父高度发生变化, child 的设定高度可能需要使用计算器。
关于html - 在 FireFox 中垂直对齐具有绝对位置和边距自动的子元素失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30195083/