javascript - Bootstrap ui Modal 的垂直和水平居中

Question

我正在尝试创建一个 Bootstrap ui Modal即垂直和水平居中对齐。

我试过this solution ，确实使模态垂直居中，但是当我用自己的模板(800px)尝试它时，它失去了水平居中:

即 - http://plnkr.co/edit/vp3IWIcrpGG6ehH8JKVe?p=preview

如何使用自己的模板实现垂直和水平居中的模式？

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

Answer 1

模态框失去中心的原因是由于这个CSS规则:

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

由于您的模板宽度为 800px，因此它会溢出其容器(.modal-dialog div)

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

示例:http://plnkr.co/edit/cYoYOgN1iMUzPKJuBw9H?p=preview