如何将 Bootstrap Modal 水平居中放置？

Question

我有一个调整大小的模态。我想要大宽度的模态和水平居中。此外，当我将其调整为更小时，它是正确的。

 <style>
    #PopupModel   {width:60%;}

.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*/

}

</style>

 <div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
    <div class="modal-dialog" role="document" >
        <div class="modal-content" >

            <div class="modal-header">

                <h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>

            </div>
            <div class="modal-body" id="modelResult">
                <br />
            </div>

        </div><!-- /.modal-content -->
        <div class="modal-footer">
            <div class="">
                <button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
                <button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div>

我测试了一些方法但对我不起作用。有什么帮助吗？

原文由 Mohsen Zahedi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您当前在 jsfiddle 中的代码会有很大帮助，但您可以尝试： .modal { width: 600px; //size of modal margin: 0 auto; }

选项 2：

如果您使用 flexbox 没有问题，请参考这个 Flexbox 的答案：水平和垂直居中

原文由 Justin Go 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这可能有点晚了，但在屏幕中心对齐模式的最简单方法是使用 vertical-align: middle;内联元素的固有属性。

请删除您添加到基本 Bootstrap 模式的所有额外格式并添加以下 CSS：

 .modal {
    text-align: center;
}

.modal::before {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -4px;
    vertical-align: middle;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

请记住，我使用的是 Bootstrap 3，上面的 CSS 可能适用于也可能不适用于 Bootstrap 4 模态。

原始解决方案：http: //www.learnsourcecode.com/blogs/align-bootstrap-modal-center-of-screen-vertically

原文由 ariebear 发布，翻译遵循 CC BY-SA 3.0 许可协议