我们正在尝试将带有卡片的登录表单垂直移动到屏幕中央，但问题是它停留在屏幕顶部。
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一起使用。如何解决此问题？我们如何将其卡片的登录表单垂直移动到屏幕中央？
答案 0 :(得分：0)
这是使用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>
这是代码的作用：
在height: 100%和html标签上同时设置body。这将允许您拉伸div.content，垂直填充整个页面。
然后，我们希望关闭按钮具有固定的高度，并让div.form-container占用页面的剩余空间。
根据css-tricks：
[flex-grow]定义伸缩项在必要时增长的能力。它接受作为比例的无单位值。它决定了该项目应在flex容器内占用多少可用空间。
如果所有项目的flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间将占其他孩子的两倍（或者至少会尝试）。
因此，仅在单个标签上设置flex: 1（是flex-grow: 1的缩写）将告诉浏览器拉伸该单个标签并填充容器的剩余空间。
现在，剩下要做的就是告诉div.form-container将div.form-card放在其中心；垂直和水平方向。这可以通过align-items: center和justify-content: center来实现。
答案 1 :(得分：0)
这是因为默认情况下设置了包含登录卡的.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>