Bootstrap 3 modal vertical position center

The Solution to Bootstrap 3 modal vertical position center is


.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

~ Answered on 2014-08-06 12:09:43


Most Viewed Questions: