html - 如何将此 bootstrap 4 表单垂直移动到屏幕中心？

Question

我们试图将带有卡片的登录表单垂直移动到屏幕中央，但问题是它停留在屏幕顶部。

HTML

<div class="container-fluid form">
    <div class="row">
        <div class="col-md-12  close-form">
            <a href="/" class="btn btn-circle button-image closeButton float-right"></a>
        </div>
    </div>
    <div class="row form-row ">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <h5 class="card-title text-center">Sign In</h5>
                    <div>
                        <div id="errorMsg" *ngIf="errorMessage">
                            <span>{{errorMessage}}</span>
                        </div>
                        <form action="" [formGroup]="SigninForm" (ngSubmit)="signinUser()">
                            <div class="form-group form-signin">
                                <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="Username"
                                    type="text" id="username" formControlName="username" />

                            </div>
                            <div class="form-group form-signin">
                                <input class="form-control form-control-lg" placeholder="Password" type="password"
                                    formControlName="password" />
                            </div>
                            <div class="form-group form-signin">
                                <div class="extra-btns align-items-center">
                                    <a href="/request-reset-password" class="btn btn-link ">Forget password</a>
                                    <a href="/sign-up" class="btn btn-link ">Sign Up</a>
                                </div>
                                <div>
                                    <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">
                                        Sign In
                                        With Email
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.container-fluid {
    height: 150%;
    overflow: hidden;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-position: bottom;
    margin: 0px;
}

.container-fluid {
  height: 100vh;
}
    .container-fluid.form.signup {
        background-size: cover;
        background-attachment: fixed;
        height: 100%;
    }
.card.card-signin.my-5,
.card.card-signup.my-5 {
 /* background-color: rgba(255, 255, 255, 0.6); */
  margin: 0 auto;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
  align-items: center;
  display: flex;
  margin-top:0px
}

我们将 Bootstrap 4 与 Angular 结合使用。如何解决这个问题？如何让签到卡垂直移动到屏幕中央？

Answer 1

这是因为包含登录卡的 .row 或 .row-form 的高度默认设置为与其子内容的大小相匹配。

给 .form-row 一个 100% 的高度值 .form-row {height:100%}。只有一个类(class)。我希望这有帮助。试试这个片段。

:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.container-fluid {
    height: 150%;
    overflow: hidden;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-position: bottom;
    margin: 0px;
}

.container-fluid {
  height: 100vh;
}
    .container-fluid.form.signup {
        background-size: cover;
        background-attachment: fixed;
        height: 100%;
    }
.card.card-signin.my-5,
.card.card-signup.my-5 {
 /* background-color: rgba(255, 255, 255, 0.6); */
  margin: 0 auto;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
  align-items: center;
  display: flex;
  margin-top:0px
}

.form-row {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid form">
    <div class="row">
        <div class="col-md-12  close-form">
            <a href="/" class="btn btn-circle button-image closeButton float-right"></a>
        </div>
    </div>
    <div class="row form-row ">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <h5 class="card-title text-center">Sign In</h5>
                    <div>
                        <div id="errorMsg" *ngIf="errorMessage">
                            <span>{{errorMessage}}</span>
                        </div>
                        <form action="" [formGroup]="SigninForm" (ngSubmit)="signinUser()">
                            <div class="form-group form-signin">
                                <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="Username"
                                    type="text" id="username" formControlName="username" />

                            </div>
                            <div class="form-group form-signin">
                                <input class="form-control form-control-lg" placeholder="Password" type="password"
                                    formControlName="password" />
                            </div>
                            <div class="form-group form-signin">
                                <div class="extra-btns align-items-center">
                                    <a href="/request-reset-password" class="btn btn-link ">Forget password</a>
                                    <a href="/sign-up" class="btn btn-link ">Sign Up</a>
                                </div>
                                <div>
                                    <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">
                                        Sign In
                                        With Email
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>