在Safari中，top: 50%不起作用。

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的标志被突出显示，正如您所看到的，所有图像都太高了。

- Eriyu

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

- M.Scriver

---

这样肯定效果更好！但奇怪的是，即使设置了height: 100％，在Safari中也不是所有链接的高度都是li的完整高度，因此我还向每个li添加了display：inline-flex;并向每个链接添加了align-self：center; ，哈哈。谢谢！ - Eriyu

救了我的一天！谢谢！ - KimCrab