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-

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

2 个答案: