Twitter bootstrap 引导和引导框：设置对话框在屏幕中央

我使用的是来自的bootbox.js，非常令人印象深刻。但是我在设置对话框的位置时遇到了一个问题

我想把对话框放在屏幕的中央。我正在使用此代码，但对话框仍位于屏幕顶部

 bootbox.alert('Danger!!').find('.modal-content').css({
     'background-color': '#f99',
     'font-weight': 'bold',
     color: '#F00',
     'top': '50%',
     'margin-top': function() {
         return -(box.height() / 2);
     },
     'font-size': '2em',
     'font-weight': 'bold'
 });

---

请告知如何设置屏幕的对话框中心。

模式已在水平方向居中。如果你想垂直居中模式，希望这将为你工作

 bootbox.alert('Danger!!').find('.modal-content').css({
     'background-color': '#f99',
     'font-weight': 'bold',
     color: '#F00',
     'top': '50%',
     'margin-top': function() {
         return -(box.height() / 2);
     },
     'font-size': '2em',
     'font-weight': 'bold'
 });

bootbox.alert('Danger!!' ).find('.modal-content').css({
    'background-color': '#f99',
    'font-weight' : 'bold',
    'color': '#F00',
    'font-size': '2em',
    'margin-top': function (){
        var w = $( window ).height();
        var b = $(".modal-dialog").height();
        // should not be (w-h)/2
        var h = (w-b)/2;
        return h+"px";
    }
});

---

根据您的示例给出此答案。

如果您希望通过css3实现垂直居中引导箱模式

.modal-open .modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

您可以在此处获得更大的灵活性：

---

这个问题很老，但另一个简短的选择是使用相应的引导类：

bootbox.alert（'Danger！！'））
.find（“.modal对话框”）
.addClass（“以模态对话框为中心”）

这适用于引导v4.0.0或更高版本。
从引导框5开始，您实际上可以通过以下选项启用此功能：

bootbox.alert({
消息：“我是一个垂直居中的对话框！”，
中心垂直：对
});
在上述示例中，其他CSS属性是否有效？谢谢您的回答。投了赞成票。效果很好，但对我来说，var b返回零，我改为：var b=$（this）.height（）；//$（“.modal对话框”）.height（）；Bootstrap 5不是必需的-根据链接，它需要Bootstrap 4.1.0。@另一个Fred仔细阅读了答案-我特别说的是Bootsbox，不是Bootstrap。