すべてのブラウザとすべてのモバイルデバイスでフォームを中央に配置する方法

Question

こんにちは皆私は、このフォームを上から下へと左から中央に配置するためにログインフォームを使用しています。私はtransformを使用しています：translate（-50％、-50％）;それはクロム、サファリ、モバイルのfirefox、そしてデスクトップでもうまく機能しています。でもうまくいきませんオペラブラウザオペラブラウザ用のウェブキットも追加しました。ここで

がある私の 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; 
} 

はオペラのようなすべての主要なブラウザでモバイル用のフォームだけでなく、デスクトップを中央に彼らの他の方法であり、 firefoxのクロムとサファリ？今、私のコードはオペラ以外のすべてでうまく動作しています。私はオペラのために書かれたWebkitも持っています。提案をお願いします。ありがとうございました。

注私はすでにmargin：0 auto;それは垂直方向の中心のためだけに中心を置きます私は再度ブラウザにブラウザのveriesをマージントップまたはパディングトップを調整する必要があります。

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