前言
bootstrap 模态框默认会在屏幕顶端显示，跟我们的操作习惯不太符合，我们期望显示到屏幕垂直居中的位置。
在最新的 bootstrap4 版本中可以在<div class="modal-dialog"> 上加一个 modal-dialog-centered 属性，来垂直居中显示。
但是大部分用的是bootstrap3 版本，需要自己写javascript脚本来调整位置。
bootstrap3 版本
bootstrap模态框默认会在屏幕顶端显示,位置太靠上了。
bootstrap3 版本，需要自己写 javascript 脚本来调整位置。
- show.bs.modal 在调用 show 方法后触发。
- shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
- hide.bs.modal 当调用 hide 实例方法时触发。
- hidden.bs.modal 当模态框完全对用户隐藏时触发。
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
$('#myModal').on('show.bs.modal', function (e) {
var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2;
$(this).find('.modal-dialog').css({
'margin-top': modalHeight
});
});
</script>实现效果
如果想显示在屏幕正中间往上一点的位置，可以通过modalHeight的值控制，比如正中间往上100个像素
代码语言：javascript复制var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2 - 100;
bootstrap4 版本
bootstrap4 版本可以在<div class="modal-dialog"> 上加一个 modal-dialog-centered 属性，来垂直居中显示。
