html - 如何在所有浏览器和所有移动设备中居中表单

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%);

Standard( Prefix free ) rules must come last, after all vendor-prefixed rules for a property.

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