Центр CSS и вертикальное выравнивание

Question

Я использовал пользовательский интерфейс загрузочного материала, чтобы создать форму для регистрации, я пытаюсь вертикально и горизонтально выровнять эту форму в центре веб-страницы. Вот мой код до сих пор:

.row { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<!-- jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-lg-6"> 
 
    <div class="well bs-component"> 
 
     <form class="form-horizontal" name="signUp" id="signUp" novalidate> 
 
     <fieldset> 
 
      <legend>Sign Up</legend> 
 
      <div class="form-group inputEmail"> 
 
      <label for="inputUsername" class="col-lg-2 control-label">Username</label> 
 
      <div class="col-lg-10"> 
 
       <input type='email' class="form-control" id="inputEmail" placeholder="Your Email" maxlength="56" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group inputPassword"> 
 
      <label for="inputPassword" class="col-lg-2 control-label">Password</label> 
 
      <div class="col-lg-10"> 
 
       <input type='password' class="form-control" id="inputPassword" placeholder="Your Password" minlength="6" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group inputConfirmPassword"> 
 
      <label for="inputConfirmPassword" class="col-lg-2 control-label">Confirm Password</label> 
 
      <div class="col-lg-10"> 
 
       <input type='password' class="form-control" id="inputConfirmPassword" placeholder="Confirm your password" minlength="6" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group inputFirstName"> 
 
      <label for="inputFirstName" class="col-lg-2 control-label">First Name</label> 
 
      <div class="col-lg-10"> 
 
       <input type='text' class="form-control" id="inputFirstName" placeholder="First Name" maxlength="50" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group inputLastName"> 
 
      <label for="inputLastName" class="col-lg-2 control-label">Last Name</label> 
 
      <div class="col-lg-10"> 
 
       <input type='text' class="form-control" id="inputLastName" placeholder="Last Name" maxlength="50" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group inputDOB"> 
 
      <label for="date" class="col-lg-2 control-label">Birthday</label> 
 
      <div class="col-lg-10"> 
 
       <input type='date' class="form-control" id="inputDOB" placeholder="mm/dd/yyyy" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <div class="col-lg-10 col-lg-offset-2"> 
 
       <button type="submit" class="btn btn-primary">Submit</button> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Я могу выровнять его по горизонтали, но не в состоянии вертикально выровнять его.

Here is a jsfiddle.

Answer 1

Вам нужно будет добавить height: 100% все родительские элементы для вертикального выравнивания внутри всей страницы. В настоящее время строка занимает только высоту содержимого и выравнивается по вертикали в соответствии с высотой содержимого.

html, body, .row { 
    height: 100%; 
} 
.row { 
    display:flex; 
    justify-content: center; 
    align-items: center; 
} 

Updated JSfiddle