为什么它以桌面为中心，而不是以设备为中心？

Question

我正在开发一个ios应用程序。

它以一个菜单，使用该CSS使其居中：

.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 data-role="page" id="loginPage"> 
      <script> 
       login.init(); 
      </script> 
    <div class="ui-corner-all ui-corner-bottom ui-content"> 

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


      <input type="text" data-clear-btn="true" name="username" 
        id="username" autocomplete="on" placeholder="username" 
        onfocus="this.placeholder = ''" 
        onblur="this.placeholder = 'username'" value=""> <input 
       type="password" data-clear-btn="true" name="password" id="password" 
       placeholder="password" onfocus="this.placeholder = ''" 
       onblur="this.placeholder = 'password'" value=""> 
      <p id="txtErro"></p> 
      <a href="" id="btnLogin" data-role="button" data-theme="b">Entrar</a> 
     </div> 

的问题是：

我以为我很好，因为在我的桌面菜单洼以人为本。但昨天我试图在iPad上运行该应用程序，并且菜单不再集中。

任何帮助？

谢谢

Answer 1

的问题是在CSS

相反的：

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

应该是：

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

要在iOS上工作，transform需要前缀-webkit-

Answer 2

使用更多divs！

<div class="outer"> 
    <div class="middle"> 
     <div class = "inner"> 
      <!-- Information here --> 
     </div> 
    </div> 
</div> 

CSS：

.outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.inner { 
    margin-left: auto; 
    margin-right: auto; 
    /* set width here */ 
}