This my code i want to do 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 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>