Can't get a modal in the middle height of the page in bootstrap5

Question

I have a button in my navigation bar that when it gets clicked a modal appears at the top of the page.I want it to center it horizontally

html:

            </button>
            <!-- </button> -->
            <div class="text-dark ">
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <!-- <div class="modal-dialog modal-dialog-centered"> -->
                  <div class="modal-dialog align-items-center d-flex">
                    <div class="modal-content ">
                      <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Log in</h1>
                        <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body text-start">
                        <form>
                          <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">Name</label>
                            <input type="text" class="form-control  text-dark" id="exampleInputEmail1" aria-describedby="emailHelp" required>
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">Email</label>
                            <input type="email" class="form-control  text-dark" id="exampleInputEmail1" aria-describedby="emailHelp" required>
                            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputPassword1" class="form-label">Password</label>
                            <input type="password" class="form-control text-dark" id="exampleInputPassword1" required>
                          </div>
                      </div>
                      <div class="modal-footer ">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                      </div>
                    </div>
              </div>
            </div>
            </div>

I tried to change the css but nothing happened.I also tried to fix it by adding mt-5 but it is not enough

Answer 1

Create this way. It will show the modal vertically centered.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

And this is achievable using class modal-dialog-centere