ブートストラップを使用してページの中央にフォームを配置します

Question

トップの中央に表示されるブートストラップログインフォームがありますが、ページの中央に表示する必要があります。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 col-sm-offset-3 well offset4"> 
     <div class=""> 
     <div class="text-warning"> 
      <h3>Login to our site</h3> 
      <p>Enter your username and password to log in</p> 
     </div> 
     </div> 
     <div class=""> 
     <form role="form" action="" method="post" class=""> 
      <div class="form-group"> 
      <label class="sr-only" for="form-username">Username</label> 
      <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username"> 
      </div> 
      <div class="form-group"> 
      <label class="sr-only" for="form-password">Password</label> 
      <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password"> 
      </div> 
      <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

このフォームをブートストラップ/ angularjsを使用してページに配置するにはどうすればよいですか？

Answer 1

デフォルトでは、ブートストラップには垂直センタリングのツールはありません。

.perfect-centering { 
    position: absolute; 
    top: 50%; 
    left:50%; 
    transform: translate(-50%,-50%); 
    } 

たぶん私が思うには、ブートストラップ4にミックスインとして含めるだろう...しかし、今のところ、あなたは追加のスタイルを使用する必要があり、 ：あなたはこの絶対的なセンタリングを追加することができますログインページの

。

Answer 2

私はdivのあなたの外にコンテナを追加しました：としても定義された新しいCSSクラス

<div class="center">  
<div class="container"> 
       <div class="row"> 
        <div class="col-sm-6 col-sm-offset-3 well offset4"> 
         <div class=""> 
          <div class="text-warning"> 
           <h3>Login to our site</h3> 
           <p>Enter your username and password to log in</p> 
          </div> 
         </div> 
         <div class=""> 
          <form role="form" action="" method="post" class=""> 
           <div class="form-group"> 
            <label class="sr-only" for="form-username">Username</label> 
            <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username"> 
           </div> 
           <div class="form-group"> 
            <label class="sr-only" for="form-password">Password</label> 
            <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password"> 
           </div> 
           <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
</div> 

を：

.center{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    padding:10px; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    } 

UPDATE：ローカルブートストラップファイルを持っている場合だけでなく、このクラスを追加しますあなたがブートストラップにリンクしている場合は、他のファイルを作成することもできます。

<div style=" position:absolute; 
    top:50%; 
    left:50%; 
    padding:10px; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%);">....</div> 

インスタントセンタークラス

Answer 3

ここでは、視野高さを使用した絶対位置指定のないソリューションです。おそらくフォームの応答幅を保持するでしょう。

CSS

/* body {height:100vh;} */ /* if needed */ 
.full-height {height:100vh;background-color:yellow;}/* 100% of the view-height */ 
.form-height {margin-top:-130px;}/* minus half the form-height */ 
.form-v-middle {margin-top:50vh;}/* half the view-height */ 

HTML

<div class="container full-height"> 
    <div class="row form-height"> 
    <div class="col-sm-6 col-sm-offset-3 well offset4 form-v-middle"> 
     <div class=""> 
     <div class="text-warning"> 
      <h3>Login to our site</h3> 
      <p>Enter your username and password to log in</p> 
     </div> 
     </div> 
     <div class=""> 
     <form role="form" action="" method="post" class=""> 
      <div class="form-group"> 
      <label class="sr-only" for="form-username">Username</label> 
      <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username"> 
      </div> 
      <div class="form-group"> 
      <label class="sr-only" for="form-password">Password</label> 
      <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password"> 
      </div> 
      <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

例： http://www.bootply.com/2wtIZimo3W

VHブラウザのサポート： http://caniuse.com/#search=vh