Суть способа в том, чтобы использовать свойство vertical-align. Если точнее, то ему нужно задать параметр - middle, который поможет нашим элементам окна центрироваться по-вертикали друг относительно друга. Пример того что у нас получится, можно посмотреть ниже:
Все очень просто и делается с помощью HTML + CSS. Для начала нужно добавить HTML код нашего окна. Тут все просто, как обычно.
<div id="modal_cinw_ctnr"> <div class="modal_cinw"> <span class="modal_close" onclick="document.getElementById('modal_cinw_ctnr').style.display='none'; return false;">X</span> <h2>Содержание окна</h2> </div> </div>
Наше окно состоит из основного контейнера, который растянется на весь экран и будет иметь полупрозрачный фон - modal_cinw_ctnr. Ну и блок, что является самим окном - modal_cinw. Внутри окна имеется кнопка для закрытия модального окна. Ей прописано событие - onclick, которое и совершает закрытие. Внутри него выполняется поиск элемента с айди - modal_cinw_ctnr и добавления ему свойства display:none.
Теперь зададим стили, которые и совершат всю работу по центрированию окна на странице.
#modal_cinw_ctnr{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); text-align: center; z-index:9999; } #modal_cinw_ctnr::after { display: inline-block; vertical-align: middle; width: 0; height: 100%; content: ''; } .modal_cinw{ padding:10px; display: inline-block; vertical-align: middle; position:relative; text-align: left; background: #fff; } .modal_close{ position:absolute; top:0; right:0; cursor:pointer; } .modal_close:hover{ background:#000; color:#fff;}
Рассмотрим основные параметры, что влияют на правильное отображение окна по порядку:
- #modal_cinw_ctnr - наш контейнер. Ему задается фиксированное позиционирование, высота и ширина в - 100%. Так же з выравниваем текст по центру с помощью - text-align. Чтобы окно было поверх всех элементов на сайте, нужно задать параметр - z-index, чем больше, тем лучше.
- #modal_cinw_ctnr::after - добавляем псевдоэлемент, чтобы наше окно смогло выровняться вертикально по центру, чтобы сработало свойство - vertical-align. Все параметры являются обязательными, удалять никакой нельзя! Псевдоэлементу прописываются параметр display со свойством - inline-block, ну и как писал уже не раз, выравнивание по вертикали с помощью - vertical-align: middle.
- .modal_cinw - наше модальное окно. Тут три основных параметра - display:inline-block; vertical-align:middle; position:relative; Остальные по желанию, но тоже желательные.
- modal_close - кнопка закрытия окна. Тут все параметры зависят от того, какой Вы хотите ее видеть. Творите с ней что угодно.
Вот и все выравнивание окна по центру страницы. На сегодняшний день, этот способ мне нравится больше всего и ни разу меня не подводил. Надеюсь он не подведет и Вас, используйте и радуйтесь.
На этом все, спасибо за внимание. 🙂