Centering a div vertically [duplicate] - html

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed last year.
I am having trouble vertically centering forms on this web page. I want the forms to appear at the centre of my page, and have managed to centre them horizontally but am somehow failing to centre the forms vertically as well.
.alignment_container {
/* Center child horizontally*/
display: flex;
justify-content: center;
align-items: center;
}
<div class="alignment_container">
<form action="/chat-page" class="custom-centered" method="POST">
<!-- styling the form -->
<div class="d-inline-flex p-2">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">#</span>
<input type="text" class="form-control" placeholder=" Enter a Username" name="user_name" aria-label="Username" aria-describedby="addon-wrapping" required>
</div>
</div>
<!-- end of styling the form -->
<button type="submit" class="btn btn-primary">Login!</button>
</form>
</div>
Where is my mistake?

Answer 1

Just add height:92vh to account for the margin on body or set to 100vh and add body{overflow:hidden;} as illustrated below:
.alignment_container {
/* Center child horizontally*/
display: flex;
justify-content: center;
align-items: center;
height:92vh;
}
<div class="alignment_container">
<form action="/chat-page" class="custom-centered" method="POST">
<!-- styling the form -->
<div class="d-inline-flex p-2">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">#</span>
<input type="text" class="form-control" placeholder=" Enter a Username" name="user_name" aria-label="Username" aria-describedby="addon-wrapping" required>
</div>
</div>
<!-- end of styling the form -->
<button type="submit" class="btn btn-primary">Login!</button>
</form>
</div>