Vertically centering Bootstrap modal window

Question

I would like to center my modal on the viewport (middle) I tried to add some css properties

 .modal { position: fixed; top:50%; left:50%; }   

Answer 1

The cleanest and simplest way to do this is to use Flexbox! The following will vertically align a Bootstrap 3 modal in the center of the screen and is so much cleaner and simpler than all of the other solutions posted here:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

NOTE: While this is the simplest solution, it may not work for everyone due to browser support: http://caniuse.com/#feat=flexbox

It looks like (per usual) IE lags behind. In my case, all the products I develop for myself or for clients are IE10+. (it doesn't make sense business wise to invest development time supporting older versions of IE when it could be used to actually develop the product and get the MVP out faster). This is certainly not a luxury that everyone has.

I have seen larger sites detect whether or not flexbox is supported and apply a class to the body of the page - but that level of front-end engineering is pretty robust, and you'd still need a fallback.

I would encourage people to embrace the future of the web. Flexbox is awesome and you should start using it if you can.

P.S. - This site really helped me grasp flexbox as a whole and apply it to any use case: http://flexboxfroggy.com/

EDIT: In the case of two modals on one page, this should apply to .modal.in

Answer 2

As of Bootstrap 4 the following class was added to achieve this for you without JavaScript.

modal-dialog-centered

You can find their documentation here.

Thanks v.d for pointing out you need to add both .modal-dialog-centered to .modal-dialog to vertically center the modal.

Answer 3

My choice, just a little CSS: ( NOT working in IE8 )

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

You can play with the first rule to change how the modal appears.

Using: Bootstrap 3.3.4

Answer 4

The best solution to centralize your modal with width and height is, in css add and in modal add this 'centralize' as a class..

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Answer 5

For those who are using angular-ui bootstrap can add the below classes based on above info:

Note: No other changes are needed and it shall resolve all modals.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Answer 6

Best way I found for all HTML5 browsers:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}