Question

我终于遇到了问题，我的搜索功能还不够。我制作了一些固定高度和宽度的画廊旋转木马，里面有图像列表（时间显示一个li）。图像位于相对margin:auto元素内的绝对位置（li等）。

图像通常比具有overflow:hidden的容器大。图像有max-width: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;
}

在这里摆弄http://jsfiddle.net/fW63c/1/

在IE8，IE9，Opera 12/15，Chrome中，它的效果很好（图像的中心位于容器的中心）但在Firefox中，较大的图像从容器的开头开始（就像它会{{1有没有人知道如何让它在FF中运行（最好只使用css）。提前感谢任何解决方案，Fafel

Answer 1

如果您不必支持IE8或更早版本，最佳方法是垂直翻译图像。此方法适用于所有主流浏览器，包括IE9 +：

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

https://jsfiddle.net/6n2vu7zd/1/

Answer 2

这个问题让我很烦恼，但最终我发现设置top: -100%;和bottom: -100%;会产生预期效果。

通常以下情况可以正常使用：

.child {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

但是在Firefox中，如果父母不像孩子那么高，那么它只会决定将它们对齐在顶部。但这会奏效：

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

我创建了一个演示来演示：

有两个例子，第一个在Firefox中会出错，但在Chrome，Edge和IE中看起来都不错。

.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.child2 {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  bottom: -100%;
  margin: auto;
}

.parent {
  margin: 30px;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: yellow;
}

<div class="parent">
  <img width="75" heigh="75" class="child" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>

<div class="parent">
  <img width="75" heigh="75" class="child2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>

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

2 个答案:

通常以下情况可以正常使用：

我创建了一个演示来演示：