bootstrap and bootbox: set dialog box center of the screen

Question

I am using bootbox.js from http://bootboxjs.com/examples.html and it is quite impressive. But I have an issue while setting up the location of the dialog box.

I want to place dialog box center of the screen. I am using this code but dialog box stays on top of the screen.

 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'
 });

Please advise how can set the dialog box center of the screen.

Answer 1

If you want a vertical centered bootbox modal via css3

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

You can have more flexibility here: https://www.kirupa.com/html5/centering_vertically_horizontally.htm https://css-tricks.com/snippets/css/a-guide-to-flexbox/