Centrare verticalmente un modal in Twitter Bootstrap 3

Le finestre modali sono molto utilizzate, in quanto sostituiscono bene i pop-up, e generalmente hanno un aspetto migliori dei classici alert.

Anche Twitter Bootstrap ha questo componente, ed è anche molto facile da usare.

Di default, però, si centra solo orizzontalmente, partendo dalla parte alta dello schermo.

Cosa che va bene nel caso di testi lunghi; ma potrebbe non essere carino nel caso di scritte molto brevi, come ad esempio modal per il loading.

Vediamo come centrarlo verticalmente usando un pò di CSS:

<style>
    .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 */
    }
</style>
<div class="modal fade modal-vertical-centered" id="modal_wait" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                Loading...
            </div>
        </div>
    </div>
</div>

Come vedete al div che contiene il modal ho aggiunto una classe (modal-vertical-centered), che uso per impostare la regola personalizzata.

Solo tre righe, di cui una per IE 9, e una per Safari e Opera.

Enjoy!