Horizontal and Vertical Center not working with iOS Safari?

Question

This is my first website I am making for a family friend. I have a series of images on this website (the spots tabs - ie baseball, football, softball etc) with an h1 text that I wanted to be centered vertically and horizontally. It works on my mobile and browser. But my brother told me it ends up not centering on his iphone 6 with safari.

http://www.pennfamous.com/tp/

I am using the following css to center the h1:

.h1format h1 {
    color: #FFFFFF; 
    position: absolute;
    top: 40%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 2em;
}

However, my brother told me on his iOS it ends up looking like this:

http://prntscr.com/9pdqk0

Is there a simple fix for this? Remember I am a novice. Thank you

Answer 1

For Safari you need the -webkit-prefix. And you might as well add the -ms-prefix to get support in IE9 (even if it's dying).

.h1format h1 {
  color: #FFFFFF; 
  position: absolute;
  top: 40%;
  left:50%;
  -ms-transform: translate(-50%,-50%); /* IE 9 */
  -webkit-transform: translate(-50%,-50%); /* Chrome, Safari, Opera */
  transform: translate(-50%,-50%);
  font-size: 2em;
}