Как центрировать div в области просмотра страницы?

Question

[Максим]

Здравствуйте.
У меня есть задача - Вызвать div по нажатию кнопки в котором будет блок обратной связи + слайдер.
Сделал для себя тестовый макет, чтобы разобраться, как поверх всех div'ов отобразить данный блок.
Столкнулся с проблемой центрирования, центрирует вверху страницы, а мне нужно, чтобы в любой области сайта при вызове, блок отображался по центру экрана. Также заметил, что на сайтах отключается scroll, когда отображается окно обратной связи. Как можно реализовать это все вместе?

Мой тестовый код: https://jsfiddle.net/maxfloyd/zhku3efw/1/ (лучше смотреть в полноэкранном режиме)
Пример отображения блока:

тыкни

Comments

[Максим]

Вопрос со скролом решил через присвоение body -> overflow: hidden

Answer 1

[Владислав Черненко]

.show {
   display:none;
   position:fixed;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}
.show-open {
   display:block;
}

Answer 2

[Dennis]

как всегда есть несколько вариантов решения, один из них, поместить модальное окно внутрь overlay (затемнения), которому добавить

display: flex
align-items: center
justify-content: center

это не самый лучший вариант, но если модалка одна, и больше никакого динамического контента не предвидится, то можно. 2й вариант - описан в ответе выше. только вместо fixed можно absolute.

А чтобы скрыть прокрутку в функцию открытия нужно добавить
document.body.style.overflow = 'hidden'
А в функцию закрытия
document.body.style.overflow = 'auto'
Также можно эту конструкцию обернуть в переменную, чтобы не дублировать код, например так

const body = document.body
//open modal
body.style.overflow = 'hidden'

//close modal
body.style.overflow = 'auto'