Question

我正在尝试将浏览器页面中的模态窗口作为中心。我只是想把它放在中心位置，以便它能够对所有屏幕做出响应。

Answer 1

有位置：绝对假设你的模态是300x300

.modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

使用display：table 另一种方法是制作显示表

<div class="modal">
    <div class="body">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>
<style>
    .modal {display:table;}
    .body {display:table-cell; vertical-align:middle; text-align:center;}
</style>

Answer 2

.modal
{
position: fixed;
left: 50%;
}

Answer 3

在整页预览中试试这个

＆＃13;

   .modal {
       width: 100px;
       height: 100px;
       margin:0 auto;
       display:table;
       position: absolute;
       left: 0;
       right:0;
       top: 50%; 
       border:1px solid;
       -webkit-transform:translateY(-50%);
       -moz-transform:translateY(-50%);
       -ms-transform:translateY(-50%);
       -o-transform:translateY(-50%);
       transform:translateY(-50%);
    }

＆＃13;

<Div class="modal"></div>

＆＃13;

Answer 4

如果模态容器如下：

<div id="containerDiv"> 
   <!--HTML modal -->
 </div>

添加css代码

#containerDiv{
margin : 0 auto;
}

Answer 5

仅使用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;
}

Answer 6

在向您展示模态时，您应该像大多数人通常那样放置display:flex而不是block。然后：

<div class="modal" id="modal">
 <div class="modal-content">
  What you want !
 </div>
</div>

和CSS：

.modal {
 width: 100%;
 height: 100%;

 justify-content: center;
 align-items: center;
}

请记住在您的modal-content中放置一个关闭按钮，因为屏幕上的其他元素将无法使用，因为modal div会覆盖所有屏幕尺寸。

Answer 7

尝试了几乎所有CSS选项，但最终有些效果：jQuery

setInterval(function()
     {
         if($('#myModal').is(':visible')===true)
         {
             $("body").addClass("modal-open");
             $('#myModal').css({"display":"flex"});
         }
         else
         {
             $("body").removeClass("modal-open");
             $('#myModal').css({"display":"none"});
         }

     },200);

这是来自Bootstrap的基本错误，涉及在正文标签中添加/删除类 modal-open 的问题，多年来一直在讨论这一问题，但直到目前尚无可用的解决方案。

Answer 8

您可以使用bootstrap 4中心模式

Vertically centered modal

如何在页面上居中模态窗口？

8 个答案: