Centrar is not working on ipad

Question

I’m developing an android application, but I’m programming in eclipse in windows using HTML, Javascript, CSS and Jquery

To test the development of the application was using an extension for google Chrome and sometimes also used the Chrome Devtools Overview (F12) mobile version.

The problem is that in these two places where it tested, the main menu of the application was well centered, both vertically and horizontally. At this time, I started to test even on an IOS device and the menu appears to me anything centered.

I was wearing this CSS that worked on Chrome, but not on the IOS device:

.center{
    /** CENTRAR NO ECRA * */
    margin: 0;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
    width: 50%;
    text-align: center; 
}

HTML

<div class="center">
                <img id="imgLogoLogin" src="img.png" alt="LOGO"
                    class="imgLogoCenter" width="250px" />
                <h1>Welcome</h1>

Any suggestions?

P.S.

Answer 1

You probably need to put too -webkit-transform: translate(-50%, -50%); in its CSS; the MDN says that transform works in Safari but only with the prefix.

I don’t have any iOS devices here, but I can confirm that with this extra rule works on Safari desktop (and conversely, that without the CSS rule does not work); see Jsfiddle.