CSS center and vertical alignment

Question

I have used the bootstrap material UI to construct a sign up form, I am trying to vertically and horizontally align this form to the centre of the web page. Here is my code so far:

.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>

I am able to align it horizontally but unable to vertically align it.

Here is a jsfiddle.

Answer 1

You will need to add height: 100% to all the parent elements for the vertical alignment inside the entire page. Currently the row only occupies the content height and is vertically aligned according to the content height.

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

Updated JSfiddle