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是一篇非常好理解的文章