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

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

使用更多的 div！

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

Answer 2

问题出在 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-

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

Why is it centered on desktop and not centered on device?

html

css

android

ios

jquery-mobile