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 top parameter is being overridden in .modal.fade.in to force the value set in your custom declaration, add the !important keyword after top. This forces the browser to use that value and ignore any other values for the keyword. This has the drawback that you can't override the value anywhere else.

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