如何让弹出窗口看到屏幕的中心？

Question

当我点击链接时,会弹出一个弹出窗口.问题是它没有与屏幕中心对齐.顺便说一句,我的代码也可以帮助网站(和弹出窗口)在移动版本中完美呈现.

HTML代码:

<a href="#" data-reveal-id="exampleModal">POP UP</a>

<div id="exampleModal" class="reveal-modal">
     <h2>POP UP</h2>
     <p>
     <font size="4">window window window.window window window. window.
         </font>
    </p>
    <a class="close-reveal-modal">×</a>
</div>

css代码:

 .reveal-modal     
  {
        background:#e1e1e1; 
        visibility:hidden;
        display:none;
        top:100px; 
        left:50%; 
        width:820px; 
        position:absolute; 
        z-index:41;
        padding:30px; 
        -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
        -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        box-shadow:0 0 10px rgba(0,0,0,0.4)
  }

我尝试了一些正确的:50%,但它没有用.不应该离开工作？

Answer 1

这些是要做的更改:

CSS:

#container {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    visibility: hidden;
    display: none;
    background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */
}
#container:target {
    visibility: visible;
    display: block;
}
.reveal-modal {
    position: relative;
    margin: 0 auto;
    top: 25%;
}
    /* Remove the left: 50% */

HTML:

<a href="#container">Reveal</a>
<div id="container">
    <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
    </div>
</div>

JSFiddle - 仅使用CSS更新

Answer 2

为了使弹出窗口完全居中，只需应用 div 高度一半的负上边距和 div 宽度一半的负左边距。对于这个例子，像这样：

.div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}

Answer 3

如果您想要的效果是无论您滚动到哪里，都以屏幕中央为中心，则比这更简单：

在你的 CSS 使用中（例如）

div.centered{
  width: 100px;
  height: 50px;
  position:fixed; 
  top: calc(50% - 25px); // half of width
  left: calc(50% - 50px); // half of height
}

无需JS。