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

Question

我正在尝试将模态窗口居中在浏览器页面中。我想要居中它，使其适用于所有屏幕的响应式设计。

- Raghu

---

尝试这个... http://jsfiddle.net/9t3sn/4/ - Karuppiah RK

试试这个很棒的解决方案：https://stackoverflow.com/a/53373717/7186739 - undefined

Answer 1

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

- Waqar Alamgir

---

left: 50%; 的问题在于它没有考虑到模态框本身的宽度。 - Alexander Suraphel

然后你可以像这样玩弄 top、left、right、bottom：.modal { top:200px; left:100px; right:100px; bottom:200px; } - Waqar Alamgir

我不知道为什么这个答案还没有被接受。left: 50%; margin-left: -(宽度的50%) 可以确保模态窗口居中。 - Wylliam Judd

Answer 2

只使用 CSS 就可以使 Bootstrap 模态框在任何屏幕尺寸下居中。

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

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

- Billu

---

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

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

- Shurvir Mori

---

我要提醒的是，这个解决方案可能会导致Chrome浏览器模糊，即使是最新的Chromium版本：https://dev59.com/X14c5IYBdhLWcg3w7t7E - Zac

Answer 4

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

- Rohan

Answer 5

如果模态框容器如下：

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

添加CSS代码。

#containerDiv{
margin : 0 auto;
}

- Abdennour TOUMI

---

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

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覆盖了整个屏幕大小。

- Big Zed

Answer 7

如果您想在窗口中央显示模态框，请按照以下步骤进行操作：

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

此外，通过更改align-items和min-height，您可以响应式地将模态框定位在所需位置。

- Kavindu Gayanath

Answer 8

如果你希望模态框的内容位于模态框中心，可以使用以下代码。在这里，top: 50% 表示内容的起始位置距离顶部有50%的距离（注意：这里的50%是相对于容器的高度而不是自身的高度），这不会使我们的内容居中，但当我们使用 translate(-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;
}

- shubham tyagi

Answer 9

你可以简单地计算顶部和左侧来使你的模态框居中：

position: absolute;
top: calc(50% - halfOfModalHeight);
left: calc(50% - halfOfModalWidth);

- Jakub

Answer 10

给定类名的整个div，使用了模态框。

例如：

<div class="modal">
in your Content
</div>

以你的风格：

.modal {
display: table;
margin: 0 auto;
}

- Subash