Позиционирование модального окна по вертикали
Есть модальное окно
let modal = document.getElementsByClassName('modal')[0];
let modalcontent = document.getElementsByClassName('modal-content')[0];
let loginlink = document.getElementById('loginlink');
let elemclose = document.getElementsByClassName("closeregwindow")[0];
loginlink.onclick = function() {
modal.style.display = "block";
}
elemclose.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
display: none;
}
.modal-content {
border: 2px solid red;
padding: 15px;
width: 50%;
height: 70%;
margin: auto;
background-color: #fff;
}
.modal-header {
border-bottom: 1px solid silver;
position: relative;
}
.closeregwindow {
cursor: pointer;
position: absolute;
right: 0;
top: -25px;
font-size: 30px;
}
.b-footer__container {
background-color: #000;
}
.loginsignuptext {
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
margin-left: 5px;
}<div class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="closeregwindow">×</span>
<h2>Шапка модального окна</h2>
</div>
<div class="modal-body">
<p>Какой-то текст в теле модального окна</p>
<p>Ещё другой текст...</p>
</div>
<div class="modal-footer">
<h3>Футер модального окна</h3>
</div>
</div>
</div>
<footer id="pageFooter">
<div class="b-footer__container">
<div class="b-footer-menu">
<div class="b-footer-menu__column">
<div class="b-footer-menu__col" data-footer-col="">
<div class="b-footer-menu__header" data-accordion-btn="0">
<a href="https://www.svyaznoy.ru/store/about-us">
Интернет-магазин
</a>
<i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
</div>
<ul class="b-footer-menu__list" data-accordion-target="0" style="display: none;">
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/about-us" class="b-footer-menu__link">О нас</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/delivery" class="b-footer-menu__link">Доставка</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/pay" class="b-footer-menu__link">Оплата</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/kredit" class="b-footer-menu__link">Покупка в кредит</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/e-catalog" class="b-footer-menu__link">Электронный каталог</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/special-offers" class="b-footer-menu__link">Акции</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/news" class="b-footer-menu__link">Новости</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/reviews" class="b-footer-menu__link">Обзоры</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/personal" class="b-footer-menu__link">Условия продажи<br> и политика обработки<br> персональных данных</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/services/card2card" class="b-footer-menu__link">Денежные переводы<br> с карты на карту</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/services/creditpayment" class="b-footer-menu__link">Оплата кредита онлайн</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/services/moneytransfer" class="b-footer-menu__link">Денежные переводы онлайн</a></li>
</ul>
</div>
</div>
<div class="b-footer-menu__column">
<div class="b-footer-menu__col" data-footer-col="">
<div class="b-footer-menu__header" data-accordion-btn="1">
<a href="https://www.svyaznoy.ru/store/company">
Компания
</a>
<i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
</div>
<ul class="b-footer-menu__list" data-accordion-target="1" style="display: none;">
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/history" class="b-footer-menu__link">Кто мы</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/catalog/elektronika-optom" class="b-footer-menu__link">Корпоративным клиентам</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/owner_of_real" class="b-footer-menu__link">Арендодателям</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/charity" class="b-footer-menu__link">Благотворительность</a></li>
<li class="b-footer-menu__line"><a href="https://job.svyaznoy.ru/" target="_blank" class="b-footer-menu__link">Работа в «Связном»</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/contacts" class="b-footer-menu__link">Контакты</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/anticorruption" class="b-footer-menu__link">Политика по противодействию<br>коррупции</a></li>
</ul>
</div>
</div>
<div class="b-footer-menu__column">
<div class="b-footer-menu__col" data-footer-col="">
<div class="b-footer-menu__header" data-accordion-btn="2">
<a href="https://www.svyaznoy.ru/store/help">
Помощь покупателю
</a>
<i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
</div>
<ul class="b-footer-menu__list" data-accordion-target="2" style="display: none;">
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/support/feedback/add-review" class="b-footer-menu__link">Обратная связь</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/shops" class="b-footer-menu__link">Адреса магазинов</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/obmen_vozvrat_remont" class="b-footer-menu__link">Обмен, возврат и ремонт</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/guarantee" class="b-footer-menu__link">Гарантия</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/support/repair-status" target="_blank" class="b-footer-menu__link">Статус ремонта</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/support/contacts/addresses" target="_blank" class="b-footer-menu__link">Адреса сервисных центров</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/service" class="b-footer-menu__link">Дополнительные услуги и сервис</a></li>
</ul>
</div>
<div class="b-footer-menu__col" data-footer-col="">
<div class="b-footer-menu__header" data-accordion-btn="3">
<a href="https://www.svyaznoy.ru/store/press_center">
Пресс-центр
</a>
<i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
</div>
<ul class="b-footer-menu__list" data-accordion-target="3" style="display: none;">
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/history" class="b-footer-menu__link">История</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/mission" class="b-footer-menu__link">Миссия и ценности</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/news/press" class="b-footer-menu__link">Пресс-релизы</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/media_about_us" class="b-footer-menu__link">СМИ о нас</a></li>
<li class="b-footer-menu__line"><a href="https://drive.google.com/open?id=1UhyjwJ6wZbUX-UxlFVTELnYi8bnxuhmg" target="_blank" class="b-footer-menu__link">Фотографии</a></li>
<li class="b-footer-menu__line"><a href="https://www.svyaznoy.ru/store/contacts_for_media" class="b-footer-menu__link">Контакты для прессы</a></li>
</ul>
</div>
</div>
<div class="b-footer-menu__column">
<div class="b-footer-menu__col is-mobile-not">
<div class="b-footer-menu__contacts">
<div class="b-footer-menu__header _xl">
<a href="tel:84952870000">8 (495) 287-00-00</a>
</div>
Интернет-магазин
<div class="b-footer-menu__header _xl">
<a href="tel:88007005000">8 (800) 700-50-00</a>
</div>
Связной Поддержка
<div class="b-footer-menu__header _xl">
<a href="tel:88007009922">8 (800) 700-99-22</a>
</div>
Корпоративным клиентам
</div>
<div class="b-footer-menu__socials">
<a href="https://www.facebook.com/svyaznoy.ru" target="_blank">
<i class="icon-fb"></i>
</a>
<a href="https://vk.com/svyaznoy" target="_blank">
<i class="icon-vk"></i>
</a>
<a href="https://twitter.com/svyaznoy_ru" target="_blank">
<i class="icon-twitter"></i>
</a>
<a href="https://www.instagram.com/svyaznoy_russia/?hl=ru" target="_blank">
<i class="icon-instagram"></i>
</a>
</div>
<div class="b-footer-menu__ga">
<a href="https://play.google.com/store/apps/details?id=ru.svyaznoy.shop" target="_blank" class="_gp" data-app-logo-event="" data-gtm-params="{"eventContextGTM":"https:\/\/play.google.com\/store\/apps\/details?id=ru.svyaznoy.shop","eventLocationGTM":"\u0424\u0443\u0442\u0435\u0440"}"></a><br>
<a href="https://apps.apple.com/ru/app/svaznoj-internet-magazin-elektroniki/id1062774471" target="_blank" class="_as" data-app-logo-event="" data-gtm-params="{"eventContextGTM":"https:\/\/apps.apple.com\/ru\/app\/svaznoj-internet-magazin-elektroniki\/id1062774471","eventLocationGTM":"\u0424\u0443\u0442\u0435\u0440"}"></a>
<br>
<a href="https://appgallery.cloud.huawei.com/marketshare/app/C102123139?locale=ru_RU&source=appshare&subsource=C102123139" target="_blank" class="_ag" data-app-logo-event="" data-gtm-params="{"eventContextGTM":"https:\/\/appgallery.cloud.huawei.com\/marketshare\/app\/C102123139?locale=ru_RU&source=appshare&subsource=C102123139","eventLocationGTM":"\u0424\u0443\u0442\u0435\u0440"}"></a>
</div>
</div>
</div>
</div>
<div class="b-footer-border">
<div class="b-footer-border__inner"></div>
</div>
<div class="b-footer-rel" data-footer-col="">
<div class="b-footer-menu__header is-mobile-only" data-accordion-btn="4">
Другие проекты
<i class="icon-angle-down-white b-footer-menu__header-icon is-mobile-only"></i>
</div>
<div class="b-footer-rel__list" data-accordion-target="4" style="display: none;">
</div>
</div>
<div class="b-footer-bottom">
<div class="b-footer-copy-wrapper">
<div class="b-footer-copy">© ООО «Сеть Связной» 2002—2021. Все права защищены. Указанная в интернет-магазине цена товаров и условия их приобретения действительны на текущую дату.</div>
</div>
<a class="b-footer-stop-covid _big lazy lazy-loaded" href="https://ecomvscovid.ru/" target="_blank" style="background-image: url("https://cdn.svyaznoy.ru/upload/web/svyaznoy/img/footer/covidlogo.svg");">
Зона безопасного сервиса. Стоп COVID.
</a>
</div>
<div class="b-footer-contacts-mobile">
<div class="b-footer-contacts-mobile__row">
<div class="b-footer-menu__socials">
<a href="https://www.facebook.com/svyaznoy.ru" target="_blank">
<i class="icon-fb"></i>
</a>
<a href="https://vk.com/svyaznoy" target="_blank">
<i class="icon-vk"></i>
</a>
<a href="https://twitter.com/svyaznoy_ru" target="_blank">
<i class="icon-twitter"></i>
</a>
<a href="https://www.instagram.com/svyaznoy_russia/?hl=ru" target="_blank">
<i class="icon-instagram"></i>
</a>
</div>
<div class="b-footer-contacts-mobile__right-col">
<a class="b-footer-stop-covid _small lazy" data-original="https://cdn.svyaznoy.ru/upload/web/svyaznoy/img/footer/covidlogo.svg" href="https://ecomvscovid.ru/" target="_blank">
Зона безопасного сервиса. Стоп COVID.
</a>
<div class="b-footer-contacts-mobile__tel">
<a class="b-footer-contacts-mobile__tel-link" href="tel:8 (495) 287-00-00">8 (495) 287-00-00</a>
<div class="b-footer-contacts-mobile__tel-descr">Интернет магазин</div>
</div>
</div>
</div>
<div class="b-footer-menu__ga _mobile">
<a href="https://play.google.com/store/apps/details?id=ru.svyaznoy.shop" target="_blank" class="_gp" data-app-logo-event="" data-gtm-params="{"eventContextGTM":"https:\/\/play.google.com\/store\/apps\/details?id=ru.svyaznoy.shop","eventLocationGTM":"\u0424\u0443\u0442\u0435\u0440"}"></a>
<a href="https://apps.apple.com/ru/app/svaznoj-internet-magazin-elektroniki/id1062774471" target="_blank" class="_as" data-app-logo-event="" data-gtm-params="{"eventContextGTM":"https:\/\/apps.apple.com\/ru\/app\/svaznoj-internet-magazin-elektroniki\/id1062774471","eventLocationGTM":"\u0424\u0443\u0442\u0435\u0440"}"></a>
<a href="https://appgallery.cloud.huawei.com/marketshare/app/C102123139?locale=ru_RU&source=appshare&subsource=C102123139" target="_blank" class="_ag" data-app-logo-event="" data-gtm-params="{"eventContextGTM":"https:\/\/appgallery.cloud.huawei.com\/marketshare\/app\/C102123139?locale=ru_RU&source=appshare&subsource=C102123139","eventLocationGTM":"\u0424\u0443\u0442\u0435\u0440"}"></a>
</div>
</div>
</div>
</footer>В результате на экран выводится
несмотря на
.modal-content {
z-index: 20;
border: 2px solid red;
padding: 15px;
width: 50%;
height: 70%;
margin: auto;
background-color: #fff;
}
Как добиться полного выравнивания модального окна по центру (включая по вертикали)?