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

Question

大家好我有一个登录表单，从我用变换上下和左右中心这种形式：翻译（-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; 
} 

是他们的任何其他方法来中心进行移动形式以及桌面像歌剧所有主流浏览器火狐铬和Safari浏览器？现在我的代码可以正常工作，除了歌剧，我还有为歌剧写的webkit。请提供一些建议。谢谢。

注意我已经尝试用保证金：0汽车;它只为垂直中心水平居中，我不得不重新调整在浏览器中向浏览器验证的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

<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-section { 
    width: 100%; 
    background: black; 
    position: relative; 
    height: 200px; 

} 
.login-form{ 
    position: absolute; 
    width: 100%; 
    padding: 20px 0; 
    top: 50%; 
    left: 50%; 
    background: GRAY; 
    -moz-transform: translate(-50%, -50%); 
     -o-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
     -webkit-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%); 
     text-align: center; 


} 
.login-form h1{margin: 0; margin-bottom: 10px;} 

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; 
}