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

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

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

如果模态容器如下：

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

添加CSS代码

#containerDiv{
margin : 0 auto;
}

Answer 4

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

Answer 5

在整页预览中试试这个

   .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>