弹出窗口没有出现在正确的位置

Question

直播网站 - http://uposonghar.com/new-video/

如果您访问该网站，然后将鼠标悬停在嵌入的YouTube视频上，则会显示2个共享按钮，1表示Facebook＆amp; 1 for twitter。点击该按钮后，即时共享窗口出现＆amp; 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 */
}

查看demo on JSFiddle。

这是Stephen Shaw撰写的一篇很棒的文章achieving absolute centering。

Answer 2

我能看到的最简单方法是复制你水平居中的方式：

.reveal-modal { top: 50%; margin-top: -186px; }

这假设箱子高度通常是一致的

Answer 3

尝试：

.reveal-modal {
 visibility: hidden;
 top: 50% !important; // there
 -webkit-transform: translateY(-50%); // and there
 transform: translateY(-50%); // and there
 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 4

你不需要绝对居中的元素。既不使用CSS3公式。只需使用display:table-cell和vertical-align: middle。

即可

这是垂直和水平居中div的概念：

<div class="modal-bg">
    <div class="modal">
        <div class="window">Test</div>
    </div>
</div>

和css：

.modal-bg
{
    display:table;
    width: 100%;
    height: 100%;
    position:fixed;
    left: 0px;
    top: 0px;
}

.modal
{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.window
{
    margin: 0 auto;
    width:200px;
    height: 200px;
    background-color: red;
}

尝试一下......它会起作用 http://jsfiddle.net/69skp/1/

Answer 5

首先删除top:300px内嵌样式，然后将高度定义为height:50%和top:25%，它将变为居中