Question

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

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

如何使用我自己的template

来实现垂直和水平居中的模态

注意 - {{1}}的宽度和高度为动态，因此解决方案应适合任何宽度和高度。

Answer 1

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

deleteDomain_Click

由于您的模板宽度为800px，因此它会溢出其容器（@media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } } div）

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

Answer 2

我刚刚用

覆盖.modal-dialog

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

此。因为它已修复with:600px;，应为max-width:800px;

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

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