Vertical center Bootstrap 3 modals

Simple jQuery fix to vertically centered modals, plus some other fixes

Include the most recent version of Bootstrap (>= 3.3.1) because previous versions of Bootstrap 3 have issues with modals.
25/11/2015 - actiove on all .modals by default and optional class
20/07/2015 - added modal-vcenter class and modified javascript

The Code

Demo and source code

Use this simple script that centers the modals.

If you want you can set a custom class (ex: .modal.modal-vcenter instead of .modal) to limit the functionality only to some modals.

// Vertical centered modals
// you can give custom class like this // var modalVerticalCenterClass = ".modal.modal-vcenter";

var modalVerticalCenterClass = ".modal";
function centerModals($element) {
    var $modals;
    if ($element.length) {
        $modals = $element;
    } else {
        $modals = $(modalVerticalCenterClass + ':visible');
    $modals.each( function(i) {
        var $clone = $(this).clone().css('display', 'block').appendTo('body');
        var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
        top = top > 0 ? top : 0;
        $(this).find('.modal-content').css("margin-top", top);
$(modalVerticalCenterClass).on('', function(e) {
$(window).on('resize', centerModals);

Also add this Css fix for the modal's orizzontal spacing; we show the scroll on the modals, the body scrolls is hidden automatically by Bootstrap:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;