Html 在Safari中忽略Css图像相对位置

我有一个图像库，结构如下（简化）：

图像的大小和比率可能会有所不同，因此我不能依赖

填充

技巧来获得纵横比

在Chrome中，这是图库的外观：

在Safari中，这就是问题所在：

下面是一支笔来说明这个问题：

我是不是忘了/错过了什么

编辑：问题似乎与Safari中的

align items:stretch

可能无法正常工作（或被忽略？）有关

编辑：我正在使用Safari 10.0.3

.gallery-item-link img {
  display: block;
  max-width: 100%;
  position: relative;
  left: 50%;
  transform: translateY(-50%);
}

你把x&y的方向弄错了。它应该是translateX而不是Y。请尝试以下操作：

.画廊项目链接{

.gallery-item-link img {
  position: relative;
  display: block;
  max-width: 100%; 
  top: 50%;
  left: 50%;
  transform: translate(-50% -50%);
}

---

}我以前遇到过这个问题。可能是因为当父元素没有像“px”这样的指定高度时，“相对”图像无法获得50%的高度

这里有另一种方法来做你想做的…sry我无法修复你的“亲戚”问题

   display: block;
   max-width: 100%;
   position: relative;
   top : 50%;
   left: 50%;
   transform: translate(-50% -50%);

我尝试使用

display:table cell；垂直对齐：中间对齐用于产生不可预测的结果并且看起来非常粗糙的图像

我最终通过为图像容器使用
flexbox
解决了这个问题：

&__item__link {
  display: block;
  height: 100%;
  white-space:nowrap;
  text-align:center;
  text-decoration: none;
  &::after{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
  }
  img {
    display:inline-block;
    vertical-align:middle;
    max-height: 100%;
    // position: relative;
    // @include center-all;
    transform-origin: bottom left;
    @include transition;
    &:hover {
      opacity: .8;
    }
  }

我在这里更新了笔：

在最新的Chrome、Safari（桌面和iOS）、Firefox、MS Edge和IE11上进行了测试。
我更新了笔。这个建议似乎没有改变任何东西。您使用的safari版本是什么？它可能与转换原点有关：左下角；css规则。将其注释掉或更改为变换原点：左上角；我错了x&y的哪个方向？检查我的笔，我有
translateX（-50%）translateY（-50%）
。
&__item__link {
  display: block;
  height: 100%;
  white-space:nowrap;
  text-align:center;
  text-decoration: none;
  &::after{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
  }
  img {
    display:inline-block;
    vertical-align:middle;
    max-height: 100%;
    // position: relative;
    // @include center-all;
    transform-origin: bottom left;
    @include transition;
    &:hover {
      opacity: .8;
    }
  }

  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;