I want to align modal center bottom on all screens

Question

This is my code i want to do that when ever modal will open it will aligned in center bttom on all screen how can i achive that ?
i do this code but its not working on all screen sizes can any one help ?
i am using this modal for creating compare functionality i use bottom:-50%; to align bottom but it not work as same on all screens.

this is css code

.compare-modal{
    padding-left     : 17px!important;
    padding-right    : 17px!important;
}
.modal-dialog-compare {
    bottom:-50%;
    box-shadow       : var(--base-shadow);
    max-width        : 900px;
}
.modal-open {
    overflow         : auto!important;
    padding-right    : 0px!important;
}
#compare-modal
{
    background-color : transparent;
}
.compare-wrapper img
{
    height           : 100px;
    width            : 100%;
}
.compare-wrapper {
    position         : relative;
}

.remove-icon {
    position         : absolute;
    top              : 5px;
    left             : 5px;
    background       : white;
    border-radius    : 50%;
    font-size        : 18px;
    height           : 22px;
    width            : 20px;
}
.compare-wrapper img{
    border-radius    : 5%;
    box-shadow       : var(--base-shadow);
}
.compare-modal .btn:hover
{
    background-color : var(--base-black);
}
.compare-modal .btn:active
{
    background-color : var(--base-black);
}
.compare-modal .modal-body
{
    padding          : 20px;
}
.compare-modal .modal-content
{
    padding          : 0px;
}
.compare-modal .modal-header .btn-close
{
    top:20px;
    right            : 20px;
}
.compare-modal .modal-header h3 {
    font-size        : 20px;
    line-height      : 40px;
    font-weight      : 600;
    margin           : 0;
}
.compare-modal .modal-footer {
    justify-content  : center;
}

this is html code

<div class="modal compare-modal fade" id="compare-modal" tabindex="-1" aria-labelledby="modal-compareLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-compare">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Compare</h3>
        <button type="button" class="btn-close close" data-bs-dismiss="modal" aria-label="Close"><i class="ti-close"></i></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-4 col-md-3 col-lg-3 col-xl-3 mb-3">
            <div class="compare-wrapper position-relative">
              <img class="car-img img-fluid" src="{{url('frontend/assets/images/car/01.jpg')}}">
              <a href="#" class="remove-icon"><i class="fa fa-times-circle text-danger"></i></a>
            </div>
          </div>
          <div class="col-4 col-md-3 col-lg-3 col-xl-3 mb-3">
            <div class="compare-wrapper position-relative">
              <img class="car-img img-fluid" src="{{url('frontend/assets/images/car/02.jpg')}}">
              <a href="#" class="remove-icon"><i class="fa fa-times-circle text-danger"></i></a>
            </div>
          </div>
          <div class="col-4 col-md-3 col-lg-3 col-xl-3 mb-3">
            <div class="compare-wrapper position-relative">
              <img class="car-img img-fluid" src="{{url('frontend/assets/images/car/03.jpg')}}">
              <a href="#" class="remove-icon"><i class="fa fa-times-circle text-danger"></i></a>
            </div>
          </div>
          <div class="col-4 col-md-3 col-lg-3 col-xl-3 mb-3">
            <div class="compare-wrapper position-relative">
              <img class="car-img img-fluid" src="{{url('frontend/assets/images/car/04.jpg')}}">
              <a href="#" class="remove-icon"><i class="fa fa-times-circle text-danger"></i></a>
            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button class="btn bg-base-black text-white">Compare All</button>
        <button class="btn bg-base-black text-white">Clear All</button>
      </div>
    </div>
  </div>
</div>