bootstrap模态框居中

方案一 重写CSS

打开引入的boostrap.css（或boostrap.min.css）文件，找到.modal、.modal-dialog样式，在样式内追加如下代码

/*模态框居中*/
        .modal {
            display: table;
            height: 100%;
            margin: 0 auto;
        }

        .modal-dialog {
            display: table-cell;
            vertical-align: middle;
        }*/

方案二 重写JS

打开引入的boostrap.js（或boostrap.min.js）文件，找到Modal.prototype.adjustDialog函数，在函数内追加如下代码

 //模态框居中
        var element = this.$element;
        var dialog = this.$dialog;
        dialog.css({
            'top': function () {
                return (element.height() - dialog.outerHeight(true)) / 2;
            }
        });

结论

重写CSS后，打开模态框后，点击灰色遮罩层后无法隐藏模态框，推荐使用重写JS方案。

打开引入的boostrap.js（或boostrap.min.js）文件，找到Modal.prototype.adjustDialog函数，在函数内追加如下代码