Как центрировать форму входа между верхним и нижним колонтитулами?Сейчас он касается заголовка, но мне нужно, чтобы он был в центре между верхним и нижним колонтитулом.Как вы можете видеть ниже, я попытался установить ширину и высоту дочернего элемента (который является контейнером) родительского элемента (который в данном случае является тегом. Любая помощь была бы замечательной. Я новичок в кодировании, и яхочу узнать, как правильно поступить. Спасибо! Я попробовал перейти по этой ссылке: Как сделать div в полноэкранном режиме? , но безуспешно.
.container {
width: 100%;
height: 100%;
}
@media only screen and (max-width: 375px) {
#col-6 {
display: flex;
margin: 0;
padding: 0;
}
#login {
font-size: .95em;
padding-top: 6px;
}
#username::placeholder {
font-size: .75em;
}
#password::placeholder {
display: none;
font-size: .75em;
}
}
@media only screen and (max-width: 412px) {
#col-6 {
display: flex;
margin: 0;
padding: 0;
}
#login {
font-size: .95em;
padding-top: 6px;
}
#username::placeholder {
font-size: .75em;
}
#password::placeholder {
font-size: .74em;
}
}
<div class="container">
<div class="row">
<div class="col-6 mx-auto" id="col-6">
<div class="card" id="card">
<div class="card-header">
<p class="h3" id="login">LOGIN</p>
</div>
<div class="card-body">
<form class="form" role="form" autocomplete="off" id="loginForm" method="POST">
<div class="form-group mx-sm-3 mb-2">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder=""
required>
</div>
<div class="col-12 text-center">
<button type="button" class="btn btn-primary btn-lg btn-danger" id="button" (click)="onClickSubmitButton()">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>