弹出窗口没有正确的位置

Question

现场 - http://uposonghar.com/new-video/

如果你去那个网站然后悬停在嵌入的YouTube视频上,那么将出现2个共享按钮,1个用于facebook,1个用于twitter.点击该按钮后,即时共享窗口出现,5秒后,另一个弹出窗口将显示为 -

但是弹出窗口没有出现在正确的位置,我想让它垂直+水平居中.

我的css代码 -

#reveal-modal-bg {
 position: fixed;
 height: 100%;
 width: 100%;
 background: #000;
 background: rgba(0,0,0,.8);
 z-index: 100;
 display: none;
 top: 0;
 left: 0;
}
.reveal-modal {
 visibility: hidden;
 top: 100px;
 left: 50%;
 margin-left: -300px;
 width: 520px;
 background: #eee;
 position: fixed;
 z-index: 101;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -box-shadow: 0 0 10px rgba(0,0,0,.4);
 text-align:center;
 padding:20px 15px 30px;
}

Answer 1

如果声明高度,则可以执行此操作以使叠加层div始终在垂直和水平方向上集中:

.reveal-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 340px; /* must be declared */
}

查看JSFiddle上的演示.

这是斯蒂芬肖的一篇伟大的文章,有几种方法可以实现绝对的中心化.