Vertically centered card between header and footer [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Trying to get the card vertically centered between header and footer, and the card must be in second floor since header and footer are in the first floor, to avoid responsive wrong behavior, like over impression of the card over header and footer.
This is my current situation: LINK
Im newer of bootstrap, every suggestion it is appreciate.
.card {
margin: 0 auto;
/* Added */
float: none;
/* Added */
margin-bottom: 10px;
/* Added */
}
footer {
position: fixed;
height: 55px;
bottom: 0;
width: 100%;
background-color: #343A40;
vertical-align: middle;
vertical-align: middle;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="/img/unknow16.png" height="32" alt="Unknow TV">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Sign In <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<br><br>
<div class=" w-50 card ">
<div class="card-header">
Login
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username">
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<!-- <div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<footer class="footer text-center">
<p> </p>
<div class="container ">
<span class="text-muted">
© <script type="text/javascript">
document.write("2018 - "+ new Date().getFullYear());
</script>2018 - 2020 Weyland-Yutani</span>
</div>
<p></p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Answer 1

<div class=" w-50 card ">
<div class="card-header">
Login
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username">
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<!-- <div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
CSS:
.card { <!-- Delete existing card code -->
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This should fix it exactly in the center just delete the existing code to fix it horizontally center to remove some problems.

Answer 2

Try adding a new element in the DOM, make the card a child of it and add the following styles, using Flexbox Model this is easily achievable.
Of course, remove the br tags as they are not needed.
.card-container {
display: flex;
align-items: center;
height: calc(100% - 110px);
justify-content: center;
}
<div class="card-container">
<div class="w-50 card">
...
</div>
</div>
Good luck!

Answer 3

thanks to suggestions, now the card is centered, the dropdown never shift content anymore, but with less resolutions, the card is over the haeder, I need to place it in second floor and the header one the first one