Bootstrap ui Modal 的垂直和水平中心

Question

我正在尝试制作一个垂直和水平居中对齐的 Bootstrap ui Modal。

我试过，确实垂直居中了 modal ，但是当我用我自己的 template （800px）尝试它时，它失去了水平中心：

我怎样才能用我自己的 template 实现这种垂直和水平居中的模态？

注意 - template 的宽度和高度是动态所以解决方案应该适用于任何宽度和和身高。

Answer 1

模态框失去中心的原因是这个css规则：

@media (min-width: 768px) {
    .modal-dialog {
      width: 600px;
      margin: 30px auto;
    }
}

由于您的模板宽度为 800 像素，它会溢出其容器（.modal-dialog div）

如果您将 .modal-dialog 设置为 width: auto 它将被修复。

Answer 2

我只是用

覆盖了.modal-dialog

.modal .modal-dialog {
 max-width: 800px;
 width: 100%;
}

这个。因为它固定了 with:600px; 应该是 max-width:800px;

对于较小的屏幕，我添加了 margin auto，这样它就不会下降。

@media (max-width: 767px){
  .modal .modal-dialog{
    margin:10px auto;
  }
}

Both vertically and horizontally center of Bootsrap ui Modal