Why my input bar stuck on the top of the page?

Question

I want my input box to be on the center of the page like a sign in page but it keep stucking on the left top of the page. I have tried using align-items-center, mx-auto, etc. but it doesn't work.

 .signin { margin-top: 5px; margin-bottom: 5px; }.signin input { border: solid 1px gray; }.input-group-text { width: 90px; }.container-fluid { align-items: center; }

 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script> <div class="container-fluid flex-column justify-content-center mx-auto"> <div class="input-group signin email"> <div class="input-group-text" id="btnGroupAddon">Email</div> <input type="text" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="btnGroupAddon"> </div> <div class="input-group signin password"> <div class="input-group-text" id="btnGroupAddon">Password</div> <input type="password" placeholder="Enter your password" aria-label="Enter your password" aria-describedby="btnGroupAddon"> </div> </div>

Answer 1

Just Give container-fluid The Following Styles and It Will Bring Your Input Fields in Center Of The Page.

.container-fluid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}