如何垂直移动此引导程序 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
}

我们正在使用带有 Angular 的 Bootstrap 4。如何解决此问题？我们如何移动登录表单，其卡片垂直移动到屏幕中央？

Answer 1

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

.form-row的高度值为 100%.form-row {height:100%}。只有一节课。我希望这有所帮助。试试这个片段。

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

Answer 2

这是一个使用flex的解决方案：

html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.content {
height: 100%;
display: flex;
flex-direction: column;  
}
.close-button-container {
text-align: right;
padding: .5rem;
font-size: .75rem;
}
.form-container {
background: #e6e6e6;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.form-card {
border-radius: 10px;
background: #fff;
padding: 25px;
}

<body>
<div class="content">
<div class="close-button-container">
x Close
</div>
<div class="form-container">
<div class="form-card">
<h3>Login</h3>
<div>
<input type="text" placeholder="username" />
</div>
<div>
<input type="password" placeholder="password" />
</div>
<div>
<button>
Login
</button>
</div>
</div>
</div>
</div>
</body>

这是代码的作用：

在html和body标记上设置height: 100%。这将允许您 拉伸div.content，垂直填充整个页面。

之后，我们希望关闭按钮具有固定的高度，并让div.form-container获取页面的剩余部分。

根据 css 技巧：

[弹性-增长] 定义弹性项目在必要时增长的能力。它接受用作比例的无单位值。它规定了项目应占用的弹性容器内的可用空间量。

如果所有项目都将弹性增长设置为 1，则容器中的剩余空间将平均分配给所有子项。如果其中一个子项的值为 2，则剩余空间将占用其他子项两倍的空间(或者至少会尝试这样做)。

因此，仅在单个标签上设置flex: 1(flex-grow: 1的简写)将告诉浏览器拉伸此单个标签并填充容器的剩余空间。

现在，剩下的就是告诉div.form-container将div.form-card放在它的中心;垂直和水平。这是通过align-items: center和justify-content: center实现的。