How to vertically align Bootstrap v4 modal dialogs

Question

Vertically center modal dialogues in Bootstrap 4.

Note: The requirements below have been added to make it clear I am looking for a prop

Answer 1

Another simple way to make your modal vertical align is to adjust top: 50%;, transform: translateY(-50%); and margin: 0 auto to the modal dialog class.

Edit: The downside is that you also have to set max-height: 100vh; to .modal-content. Otherwise the top of modal is not accessible anymore when your modal is getting heigher than the viewport.

Demo:

.modal.vertically-modal .modal-dialog {
  transform: translateY(-25%);
  top: 50%;
  margin: 0 auto;
}

.modal.vertically-modal.show .modal-dialog {
  transform: translateY(-50%);
}

.modal-content {
  max-height: 100vh;
  overflow-y: auto;
  padding: 40px;
}

Show modal


  

    

      Vertically modal