Css 在Firefox中垂直对齐大于容器的绝对元素

我终于遇到了我的搜索不足的问题。我制作了一些固定高度和宽度的画廊旋转木马，里面有图像列表（一次显示一个li）。图像被绝对定位（带有

边距：auto

etc）在相对

li

元素内

图像通常比其容器大，该容器具有

溢出：隐藏
。图像具有
最大宽度：100%
它创建了一种理想的效果，即较小的图像在容器中居中，较大的（较高的）图像被裁剪，可以打开以获得完整版本

.gallery-items>li {
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
position:relative;
overflow:hidden;
}
.gallery-items>li img {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
max-width:100%;
max-height:none;
height:auto;
width:auto;
position:absolute;
}

在这里拉小提琴

它在IE8、IE9、Opera 12/15、Chrome中工作得很好（图像的中心在容器的中心），但在Firefox中，较大的图像从容器的开头开始（就像它会有
top:0
。有人知道如何在FF中工作吗（最好只使用css）。提前感谢您提供的任何解决方案，如果您不必支持IE8或更高版本，Fafel的最佳方法是垂直翻译图像。此方法适用于所有主要浏览器，包括IE9+：

img {
  top: 50%;
  transform: translateY(-50%);
}

这个问题一直困扰着我，但最终我发现设置
顶部：-100%；
和
底部：-100%；
将达到预期效果

正常情况下，以下各项可以正常工作：
但在Firefox中，如果父对象没有子对象高，它会简单地决定将它们排列在顶部。但这会起作用：

.child2 {
    position: absolute;
    left: 0;
    right: 0;
    top: -100%;
    bottom: -100%;
    margin: auto;
}

我创建了一个演示来演示：
有两个例子，第一个在Firefox中是错误的，但在Chrome、Edge和IE中看起来都不错


.child{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
}
.儿童2{
位置：绝对位置；
左：0；
右：0；
前-100%；
底部：-100%；
保证金：自动；
}
.家长{
利润率：30像素；
位置：相对位置；
显示：内联块；
宽度：100px；
高度：25px；
背景颜色：黄色；
}

但是它确实有
top:0；
-这不是你的css告诉它要做的吗？请创建一个提琴。也许FF有正确的标准解释，但是所有其他浏览器对待它的方式都不同于FF。很难说为什么在没有空白的情况下top:0比bottom:0更重要。这是一个奇怪的行为，我认为几分钟前，我没弄明白，最后我使用了FireFox CSS黑客，你可能想考虑：
.child2 {
    position: absolute;
    left: 0;
    right: 0;
    top: -100%;
    bottom: -100%;
    margin: auto;
}