top: 50%; not working in Safari

Question

My page is live at http://brand2o.com/experience.php, and I'm using this CSS to vertically center the images inside the links:

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

It's working properly in Firefox and Chrome, but Safari seems to be ignoring top: 50%; altogether and I don't know why.

Here, the Activision logo is highlighted, and as you can see, all the images are too far up.

Answer 1

Try this:

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