Я хочу выровнять модальный центр внизу на всех экранах. ⇐ CSS

[Anonymous]

Это мой код, я хочу сделать это, когда модальное окно откроется, оно будет выровнено по центру внизу на всем экране. Как я могу этого добиться?

Я делаю этот код, но он работает не на всех размеры экрана, может ли кто-нибудь помочь?

Я использую это модальное окно для создания функции сравнения. Я использую нижнюю часть: -50%; для выравнивания нижней части, но она не работает одинаково на всех экранах.< /p>
это CSS-код
.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;
}

это HTML-код




Compare































Compare All
Clear All






Подробнее здесь: https://stackoverflow.com/questions/786 ... ll-screens