Centering is not working on ipad

Navigation
2

I'm developing an android app, but I'm programming in eclipse on windows using HTML , JavaScript , CSS and JQuery

To test application development I 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 testing, the main menu of the application was well centered, both vertically and horizontally. At this point, I started testing even on an iOS device and the menu appears to me nothing centered.

I was using this CSS that worked in chrome, but not in 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?

Q. I have no experience with IOS

    
asked by anonymous 04.06.2015 / 18:43

1 answer

2

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

I do not have any iOS device here, but I can confirm that with this extra rule it works on Safari desktop (and vice versa, that without the CSS rule does not work); see JSFiddle .

    
04.06.2015 / 18:51
Query data mysql with x Days to win Java - Disk Reader (Linux)