Centering a div vertically

Question

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?

to center it vertically you have to set an height to the container. Otherwise the container will have the same height as the content... — Lelio Faieta, Jan 12 '22 at 17:37

score 0 · Answer 1 · edited Jan 12 '22 at 17:48

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>

Centering a div vertically

1 Answers1