Сразу предупреждаю: способ хорош в случае, если высота модального окна < высоты экрана. Если высота модального окна > высоты экрана и сам контент страницы порождает скроллинг, то может вылезти 2 скроллинга. Этот момент можно пофиксить выставив overflow-y: hidden; у body в момент отображения модального окна.
Взято с хабра из комментов
Принцип такой:
- создаем заголовочный блок и ставим ему следующие стили:
.modal_overlay{ width: 100%; height: 100%; position: fixed; text-align: center; background: rgba(0, 0, 0, 0.8); top: 0; left: 0; z-index: 9; justify-content: center; align-items: center; display: flex; overflow: auto; }
- в этом блоке будет находится оверлей и устанавливаются правила позиционирования дочерних элементов — в данном случае самого модального окна