爲什麼它以桌面爲中心，而不是以設備爲中心？

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 */ 
}