CSS中心和垂直對齊

Question

我已經使用引導材質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。

Answer 1

您需要為整個頁面內的垂直對齊的所有父元素添加height: 100% 。 目前，該行僅占據內容高度，並根據內容高度垂直對齊。

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

更新了JSfiddle