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

Posted 2023-03-29

【中文标题】如何在页面上居中模式窗口？

【英文标题】：How to center a modal window on a page?

【发布时间】：2014-01-23 12:35:11

【问题描述】：

我正在尝试在浏览器页面中居中模式窗口。我只是想把它居中，这样它就可以响应所有的屏幕。

【问题讨论】：

试试这个...jsfiddle.net/9t3sn/4

【参考方案1】：

With position:absolute假设你的模态是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>

【讨论】：

left: 50%; 的问题是它没有考虑模态框本身的宽度。

然后你可以像这样玩弄上、左、右、下： .modal top:200px;左：100px；右：100px；底部：200px；

我不知道为什么这个答案还没有被接受。 left: 50%; margin-left: -(50% of width); 肯定是模态窗口的中心。

【参考方案2】：

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

浏览器和屏幕兼容解决方案

【讨论】：

这是一个很好的解决方案，因为它适用于任何宽度或高度的模态。

【参考方案3】：

在整页预览中试试这个

   .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%);
    

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

【参考方案4】：

.modal

position: fixed;
left: 50%;

【参考方案5】：

如果模态容器如下：

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

添加css代码

#containerDiv
margin : 0 auto;

【讨论】：

注意：我需要确保不继承任何其他边距属性，例如“margin-left”“margin-right”并取消设置它们。

【参考方案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 覆盖了所有屏幕尺寸。

【参考方案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 中关于向 body 标签添加/删除类 modal-open 的基本错误，多年来一直在讨论，但到目前为止还没有可行的解决方案。

【参考方案8】：

如果您想在窗口的中心显示模态，请按照以下步骤操作；

.modal 
  text-align: center;

.modal-dialog 
  display: flex;
  align-items: center;
  min-height: calc(100% - 0rem);
 

此外，通过更改 align-items & min-height，您可以将模态框定位在适当的位置。

【参考方案9】：

如果您将模态内容置于模态的中心，则可以使用类似的内容。在这里 top: 50% 意味着内容的开始将从顶部开始 50% （注意：这里 50% 是相对于容器高度的值，而不是它自己的）这不会使我们的内容中心但是当我们翻译时（-50 %,-50%) 那么元素将从它的开始向上遍历 50%（注意：这里 -50% 是相对于它自己的高度而不是容器的高度的值）

.modal 
  position: fixed;
  background-color: rgba(0, 0, 0, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s;

.modal-content 
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2% 7%;
  border-radius: 0.5rem;

【参考方案10】：

你可以使用 bootstrap 4 center modal

Vertically centered modal

【讨论】：

这个答案没有考虑到解决方案可能不希望依赖于库