如何以垂直居中对齐的方式放置 Bootstrap 模态？答案

【问题标题】：How to place Boot strap modal in vertically center aligned manner?如何以垂直居中对齐的方式放置 Bootstrap 模态？
【发布时间】：2015-01-10 17:51:58
【问题描述】：

您好，我有 Bootstrap 模式。我没有让锄头垂直居中对齐？

 $('#sectionAjaxLoader').modal('show');

  <section class="modal" id="sectionAjaxLoader" data-keyboard="false" data-backdrop="static">
        <img src='../../Images/ajax_loader.gif' alt="Please Wait..." />
    </section>

有什么想法可以实现吗？

【问题讨论】：

标签： twitter-bootstrap vertical-alignment bootstrap-modal

【解决方案1】：

这样使用

.modal {
    text-align: center;
}
.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

工作小提琴

http://jsfiddle.net/52VtD/9057/

【讨论】：

它被要求等待几分钟..所以我在等待

【解决方案2】：

仅使用 css

.modal {
        }
        .vertical-alignment-helper {
            display:table;
            height: 100%;
            width: 100%;
        }
        .vertical-align-center {
            /* To center vertically */
            display: table-cell;
            vertical-align: middle;
        }
        .modal-content {
            /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
            width:inherit;
            height:inherit;
            /* To center horizontally */
            margin: 0 auto;
        }

演示：See, 另一个演示：See

【讨论】：