Question

大家好我有一个登录表单从上下左右居中这个表单我用过transform：translate（-50％， - 50％）;它在Chrome，safari，firefox和移动设备以及桌面设备上运行良好。但它在 Opera浏览器中运行不佳我还为Opera浏览器添加了webkit。

这是我的demo to play with css 这是HTML代码

<div class="container"> 
                <div class="login-form-section">
                    <form class="login-form">
                        <h1 class="login-text">Login</h1>
                        <input type="email" class="input-lg form-control login-input" placeholder="Email" required="" autofocus="">
                        <input type="password" class="form-control login-input input-lg" placeholder="Password" required="">
                        <button class="btn btn-lg btn-yellow-submit btn-block" type="submit">
                        Login
                        </button>
                        <a class="forgot-pass-link" href="forgot-password.html"><span class="f-link">Forgot Password</span></a>
                        <a href="order.html" class="register-link"><span class="r-link">Register and Subscribe</span></a>
                    </form>
                </div>
            </div>

和我的css

.login-form {
    max-width: 375px;
    background: black;
    padding: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    /* -webkit-transform: translate(-50%,-50%); */
    -o-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    width: 100%;
    display: block;
}

他们的任何其他方法是否适用于所有主流浏览器（例如opera firefox chrome和safari）中的移动设备和桌面设备？现在我的代码与除Opera之外的所有代码都正常工作，我也为opera编写了webkit。请提供一些建议。谢谢。

注意我已尝试过margin：0 auto;它只是水平居中于垂直中心我必须再次调整margin-top或padding-top，它在浏览器中进行浏览。

Answer 1

这不能回答您的问题，但应按此顺序使用供应商前缀规则：

-ms-transform: translate(-50%,-50%);
/* -webkit-transform: translate(-50%,-50%); */
-o-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

标准（前缀免费）规则必须在属性的所有供应商前缀规则之后。

关于你的问题，它似乎在Opera上工作正常。如果它在某些较旧的Android版本上无法正常工作，您可以使用Modernizr来检测这些版本中不支持哪些功能并相应地使用css解决方法。

Answer 2

HTML

void MyFunction(T1 input1, T2 input2)

和css是

<div class="container"> 
                <div class="login-form-section">
                    <form class="login-form">
                        <h1 class="login-text">Login</h1>
                        <input type="email" class="input-lg form-control login-input" placeholder="Email" required="" autofocus="">
                        <input type="password" class="form-control login-input input-lg" placeholder="Password" required="">
                        <button class="btn btn-lg btn-yellow-submit btn-block" type="submit">
                        Login
                        </button>
                        <a class="forgot-pass-link" href="forgot-password.html"><span class="f-link">Forgot Password</span></a>
                        <a href="order.html" class="register-link"><span class="r-link">Register and Subscribe</span></a>
                    </form>
                </div>
            </div>

Answer 3

如果需要全页面掩码（背景），可以这样做：

的CSS：

.login-form-section {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    background: #fff;

    text-align: center;
}

.login-form-section:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.login-form {
    max-width: 375px;
    background: black;
    padding: 25px;
    display: inline-block;
    text-align: left;
    width: 100%;
    vertical-align: middle;
}

如何在所有浏览器和所有移动设备中居中

3 个答案: