Vertical align in 3 css lines

Nice trick from:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

/* not required half pixel fix */
.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* this is all to vertical align */
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Unfortunately the solution above doesn't seem to work correctly in Safari

This one seems to work better
https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div/18869078#18869078

<div class="frame">
  <img src=foo"/>
</div>

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}