如何在所有瀏覽器和所有移動設備中心表單

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