css - 顶部 : 50%; not working in Safari

Question

我的页面在 http://brand2o.com/experience.php 上线，我正在使用此 CSS 将链接内的图像垂直居中:

img {
  position: relative;
  top: 50%;
  width: 80%;
  padding: 10%;
  transform: translateY(-50%);
}

它在 Firefox 和 Chrome 中工作正常，但 Safari 似乎完全忽略了 top: 50%;，我不知道为什么。

此处，Activision Logo 突出显示，如您所见，所有图像都太靠上了。

Answer 1

试试这个:

main #experienceLogos li a {
    display: inline-flex; //switch from block display
    width: 100%;
    height: 100%;
}


main #experienceLogos li img {
    position: relative;
    /* top: 50%; Remove this*/
    width: 80%;
    padding: 10%;
    /* transform: translateY(-50%); Remove this */
    -webkit-align-self: center; //safari 7+
    align-self: center;
}