Bootstrap 3 modal vertical position center

by

This is a two part question:

  1. How can you position the modal vertically in the center when you don’t know the exact height of the modal?

  2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?

I have tried using this:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

This gives me the result I need when the content is much larger than vertical screen size, but for small modal contents it’s pretty much unusable.

34 Answers
34

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

And adjust a little bit .fade class to make sure it appears out of the top border of window, instead of center

Leave a Comment