I'm struggling to vertically center a card (or container). Although I can center it horizontally, the vertical alignment is proving to be difficult. Despite trying out various code snippets from Stack Overflow and other websites, none of them seem to work. Here is my current code:
<div class="container col-md-3 py-5">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Login</h3>
</div>
<div class="card-body">
<form class="form">
<div class="form-group">
<label for="username">Username:</label> <input class="form-control" type="text" name="username" id="username" autofocus required >
</div>
<div class="form-group">
<label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required>
</div>
</form>
</div>
</div>
</div>