Bootstrap4模态框垂直居中，只需要在添加 .modal-dialog 类的div再添加一个 .modal-dialog-centered 就可以了。具体如下。

Bootstrap4模态框默认不会居中显示在浏览器窗口中心而是显示在窗口顶部，在很多情况下这种设计十分不美观。

百度的时候发现能找到的资料都是Bootstrap3的，而这些方法在Bootstrap4上大部分已经不适用了。

在这里先直接给出Bootstrap4上模态框居中的解决方案，后面再补充一些Bootstrap3的方案（自己并没有在Bootstrap3上尝试过）以及自己在Bootstrap4尝试这些方案的时候遇到的部分问题，以供参考。

额，说来惭愧。。。解决方案非常简单， 官方文档 写的清清楚楚，但是之前就是没有注意到。。。

只需要在添加 .modal-dialog 类的div再添加一个 .modal-dialog-centered 就可以了。官方示例代码效果如图，自己测试也完全没有任何问题。

失败方案：

• .align-items-center，align-self-center，align-content-center 等类可以使元素数值居中，但是对模态框没有效果。
• 使用js调整模态框margin-top属性使其位于屏幕中心。margin-top = （浏览器窗口高度 -  模态框高度） / 2。

  function util_set_modal_position() {
      let modal = $("#modal-id");
      let margin_top = ($(window).height() - modal.height()) / 2 + "px";
      //下面三行删除
      alert($(window).height());
      alert(modal.height());
      alert(margin_top);
      //上面三行删除
      modal.css("margin-top", margin_top);
  }

  发现没有效果，百度发现模态框弹出之前是获取不到高度的，实验发现在Bootstrap4中即使模态框弹出也无法获取高度。。。 alert(modal.height()) 的值为0或者一个很小的负数，暂时还不清楚是什么。

• 修改bootstrap.js源代码，这是 原文链接 ，这里是Bootstrap3的源代码，Bootstrap4和它有些差异（对应代码2422行左右的位置），自己只是个前端菜狗，JavaScript都没怎么学过，自己改起来有点费劲，索性懒得改了，大佬们可以自己改一下。这种修改源代码的方法还有一个弊端就是不能使用CDN导入Bootstrap。
• 其他失败方案就不写了，方正都是失败的，也没卵用。。。

$.imgpic = function(src) { var $textAndPic = $('<div></div>'); $textAndPic.append('<img width="100%" height="100%" src="'+src+'"/>'); Bootstrap Dialog.show({ title : '图片 展示 ', message : $textAndPic Bootstrap 是全球最受欢迎的 前端 组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是一套用于 HTML、 CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。 Bootstrap 4下载地址：&amp;gt;... 这将使用 flexbox 将 模态框 水平 居中 。 3. 如果以上两种方法都没有解决问题，您可以尝试使用 JavaScript 动态计算 模态框 的 left 和 top 值，以实现水平 居中 。例如： $(document).ready(function(){ $('#my Mo dal ').on('show.bs. mo dal ', function (e) { var mo dal Width = $(this).find('. mo dal -dialog').width(); $(this).find('. mo dal -dialog'). css ({ 'margin-left': function () { return -($(this).width() / 2); 这将在 模态框 显示时动态计算其宽度并将其 居中 。请注意，这需要 jQuery 库的支持。