jQuery将div居中于页面中间

Question

我正在开发Lightbox（教程） ，这是一个div容器，单击即可打开。
该div容器未显示，位于click元素下方。
现在，我尝试将其垂直居中，但没有成功。
在Stackoverflow上找到了其他一些问题，但是没有人像我这样为我工作。

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

问题是：在开始时，div几乎超出了底部屏幕，而下面的div超出了顶部屏幕。
无论位置如何，我都会将每个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显示设置为table-cell，并为此容器指定中心和中间对齐方式：
display: table-cell; vertical-align: middle; text-align: center;

将您想要的任何东西放入其中； 小提琴示例在此中间容器中包含其他html，以作为示例。 CSS显示属性的表和表单元格值在这里起着神奇的作用。 http://colintoh.com/blog/display-table-anti-hero是一篇非常好理解的文章