Update: In the latest release, Beta 3, you can now center the modal vertically by adding the class .modal-dialog-centered to .modal-dialog. For more details, refer to the documentation.
Here is the original answer:
SCSS:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
@media(max-width: 768px) {
min-height: calc(100vh - 20px);
}
}
or unprefixed CSS:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
@media(max-width: 768px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
Note 1: Keep in mind that fully prefixed CSS may become obsolete as browser support changes. To get the latest prefixed CSS, input the unprefixed code into Autoprefixer, adjust the settings, and grab the updated CSS.
Note 2: This answer was originally added during the early stages of v4 (alpha 3 or 4), which is now in the beta phase. You can enhance the CSS by adding the following classes to .modal-dialog:
h-100 d-flex flex-column justify-content-center my-0
As noted by @Androbaut in the comments below, you will still need the JavaScript (see below) to close the modal on click or tap outside the modal window.
jQuery (required for modal closing on click/tap):
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
And that's all you need!
For a working sample, fully-prefixed CSS, and markup with various modal sizes, refer to the code snippet above. If you encounter any issues or have suggestions for improvement, feel free to share. Your feedback is valuable in enhancing the content.