如何使弹出窗口居中显示在屏幕中央？

Question

如何使弹出窗口居中显示在屏幕中央？

24

当我点击一个链接时，会弹出一个弹窗。问题在于它没有居中显示在屏幕上。顺便说一下，我的代码还能帮助网站（和弹窗）在移动版本中完美显示。

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)
  }

我也尝试了一些 right:50% 的样式，但是没有起作用。left 不应该可以使用吗？

- Datacrawler

要么使用jQuery来计算/设置左侧位置，要么将弹出窗口放在一个全宽容器中，并在其上设置文本对齐方式为居中。 - random_user_name

4个回答

25

为了使弹出框居中，只需要将div高度的一半作为负上边距，将div宽度的一半作为负左边距即可。例如：

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

- anilam

这应该应用于容器div还是模态div？ - vikramvi

直接返回到模态框div。 - GorvGoyl

7

如果您想要的效果是无论您滚动到哪里，都将内容居中在屏幕中央，那么比这更简单：

在您的CSS中使用以下代码（例如）：

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

不需要JS。

- Nancy Hastings-Trew

你需要将左侧位置减去50像素。如果我的弹出窗口宽度不是固定的（一些百分比值），该怎么办？ - Mara

好的解决方案，但在一些移动浏览器中缺乏历史支持（来源：https://caniuse.com/#search=calc） - Hassan Baig

“calc”非常简单，您可以使用负边距，例如top: 50%; margin-top: -25px; // 高度的一半。 - vahanpwns

1

/*--------  Bootstrap Modal Popup in Center of Screen --------------*/
/*---------------extra css------*/
.modal {
    text-align: center;
    padding: 0 !important;
}
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
/*----- Modal Popup -------*/
<div class="modal fade" role="dialog">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h5 class="modal-title">Header</h5>
            </div>
            <div class="modal-body">
               body here     
             </div>
        <div class="modal-footer">            
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

- Awadhesh Singh

2

下次请考虑补充您的回答 :) - Ivan Kaloyanov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Deryck · Accepted Answer

这些是需要改动的内容：

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进行更新