jquery中心在页面中间有一个div

Question

我正在使用Lightbox (tutorial)，一个div容器，只需点击一下即可打开。
此div容器未显示，位于点击元素下方 现在我试图将它垂直但没有成功 在Stackoverflow上找到了一些其他问题，但没有人为我工作，like this。

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

问题是：在开始时div几乎超出了bottem屏幕，并且下面的div超出了顶部屏幕。
无论位置如何，我都会在屏幕中间放置每个div。

Answer 1

正如@Rakesh对这个问题的评论，这可以仅用CSS来完成;看到这个小提琴https://jsfiddle.net/xc2vrghx/1/

你必须使用2个div。 外部完全100％宽度/高度，绝对定位，显示设置为表＆amp;对齐中心和中间 - 像这样：

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

内部div（这是你的居中容器）必须将css显示设置为table-cell，并给出center＆amp;中间对齐此容器：
  display: table-cell; vertical-align: middle; text-align: center;

在这里放置任何你想要的东西;小提琴示例在此中间容器中包含其他html以显示为例。 CSS显示属性的表＆amp; table-cell 值在这里发挥着神奇的作用。 http://colintoh.com/blog/display-table-anti-hero是一篇非常好的文章，可以理解