如何使这个基于css/javascript的模式对话框垂直居中？

我已成功将我的覆盖对话框水平居中，边距为：0 auto

但我不知道如何垂直居中

有什么建议吗

CSS:

---

您需要为html结构中的每个父项添加100%规则，这样才能起作用，如果所有父项的高度都不是100%，那么它就不会在任何屏幕上垂直居中。

根据布局（div或table），有很多方法可以实现CSS垂直居中。我建议你看看这里

---

您可以使用jQuery计算垂直偏移量，并在加载页面时进行设置：

$(document).ready(function(){
   var top = ($("body").height() / 2) - ($("#dish-popup").height()/2);
   var left = ($("body").width() / 2) - ($("#dish-popup").width()/2);
   $("#dish-popup").offset({top: top, left: left});
});

---

当您指的是所有父元素时，您指的是该div之前的所有元素？所有在该元素之前有开始标记且在该div之后关闭的元素，换句话说，是“包装”您的div的元素。包括body和html，它们也应该具有高度添加。执行以下操作：高度：100%，最小高度：100%，高度：自动；//高度自动确保它在较旧的浏览器中工作。

$(document).ready(function(){
   var top = ($("body").height() / 2) - ($("#dish-popup").height()/2);
   var left = ($("body").width() / 2) - ($("#dish-popup").width()/2);
   $("#dish-popup").offset({top: top, left: left});
});