How to vertical-center Twitter Bootstrap 3 modal?

Question

I've been trying to vertical center the Boostrap 3 modal dialog without sucess. How can that be accomplished?

Answer 1

You can achieve vertical alignment center on Bootstrap 3 modal like that :

.modal-vertical-centered {
transform: translate(0, 50%) !important;
-ms-transform: translate(0, 50%) !important; /* IE 9 */
-webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

and add this css class to the "modal-dialog" container

<div class="modal-dialog modal-vertical-centered">
...

jsFiddle working example : http://jsfiddle.net/U4NRx/