jquery center a div в середине страницы

Question

Я работаю над Lightbox (tutorial), контейнер div, который открывается одним нажатием.
Этот контейнер контейнера не отображается и находится под элементом щелчка.
Теперь я попытался центрировать его вертикально, но с успехом.
Нашел несколько других вопросов здесь, в Stackoverflow, но никто не работал для меня, like this.

 
$(window).resize(function() { 
    $(".modal-box").css({ 
    top: (($(window).height() - $(".modal-box").outerHeight()/2) + $(window).scrollTop() + "px") 
    }); 
}); 

Проблема заключается в том: Вначале DIV почти из экрана bottem и дивы ниже вышел из верхней части экрана.
У меня будет каждый div в середине экрана, независимо от положения.

Answer 1

Как @Rakesh прокомментировал вопрос, это можно сделать только с помощью CSS; см. эту скрипку https://jsfiddle.net/xc2vrghx/1/

Вы должны использовать 2 div. Внешний один с полной 100% шириной/высотой, абсолютно позиционируемые дисплеем установлены в таблицах & выравнивания по центру & середины - как это:

display: table; min-width: 100%; min-height: 100%; position:absolute;

внутренний DIV (который является вашим центром контейнера) должен иметь дисплей CSS установлен стол-клетки, и дать Центру & среднего выравнивания для этого контейнера:
display: table-cell; vertical-align: middle; text-align: center;

место все, что вы хотите в этом; Пример скрипта содержит дополнительный html внутри этого среднего контейнера для показа в качестве примера. CSS display property Таблица & Стол-ячейка значения играют здесь магическую роль. http://colintoh.com/blog/display-table-anti-hero - очень хорошая статья, чтобы понять