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