Bootstrap Modal Responsive Vertical Centering?

How can I vertically centerise the bootstrap modal? I have looked around for a solution here but they are not responsive, or just not working at all. I am using Bootsrap 3. The mod

Solution 1:

I think this is it,

css,

.modal-dialog {
        top: 0;
        margin-top:0;
        display: none;
        border:1px solid red;
    }

jquery + bootstrap,

$('#myModal').on('shown.bs.modal', function (e) {

            varobject = $('.modal-dialog');
            var object_outerheight = object.outerHeight();
            var window_height = $(window).height();
            var window_scrolltop = $(window).scrollTop();
            var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
            console.log(object_top);

            // Set the object's position.object.css({
                marginTop: object_top + 'px'
            }).fadeIn();

            // Add responsive when the window is being resized.
            $( window ).resize(function() {

                // Redo the calc on each resize's action.var window_height = $(window).height();
                var window_scrolltop = $(window).scrollTop();
                var object_top = ((window_height - object_outerheight)/2) + window_scrolltop;
                console.log(object_top);

                // Reset the object's position.object.css({
                    marginTop: object_top + 'px'
                });

            });
        });

Solution 2:

Using css we can place Bootstrap modal at vertical center.

.modal {
        text-align: center;
        padding: 0!important;
    }

    .modal:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin: -2px;
        height: 100%;
    }

    .modal-dialog {
        display: inline-block;
        vertical-align: middle;
    }