顶部：50%；无法在 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 徽标突出显示，正如您所看到的，所有图像都离得太远了。

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;
}