Question

我成功地将我的叠加对话框水平居中，边距为：0 auto;。

但我不知道如何垂直居中。

有什么建议吗？

CSS：

/* =Overlay
-------------------------------------------------------------- */
#overlay {
     display: none;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay #dish-popup {
     margin: 0 auto;
     background-color: #fff;
     padding:15px;
     text-align:center;
     width: 810px !important;
     height: 700px !important;
}

Answer 1

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

CSS VERTICALLY CENTERING

Answer 2

您需要为html结构中的每个父级添加规则100％才能使其正常工作，如果所有父级的高度都不是100％，则它不会垂直居中于任何屏幕。

Answer 3

您可以使用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});
});

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

3 个答案: