CSS居中和垂直对齐

Question

我使用了Bootstrap Material UI来构建一个注册表单，现在我想要垂直和水平居中这个表单在网页的正中央。以下是我的代码：

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

我可以水平对齐它，但无法垂直对齐它。

这里是一个 jsfiddle。

- RRP

Answer 1

你需要在所有父元素上添加height: 100%以实现整个页面内的垂直对齐。目前该行仅占据内容高度，并根据内容高度进行垂直对齐。

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

更新的JSFiddle

- m4n0

---

这个完美地运行了，谢谢解释。 - RRP