Bootsrap ui Modal的垂直和水平中心

Question

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

我试过这个解决方案，确实垂直居中的模态，但当我用我自己的template （800px）尝试它时，它失去了它的水平中心：

我怎么能用我自己的template在垂直和水平中心实现这个模态？

注意 - template的宽度和高度是动态的，因此解决方案应适合任何宽度和高度。

Answer 1

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

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

因为你的模板宽度为800px，所以它的容器溢出（ .modal-dialog div）

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

Answer 2

我刚刚用。覆盖.modal-dialog

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

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

对于较小的屏幕，我添加了自动保证金，因此它不会下降。

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