center the modal-dialog Horizontally and vertically

Question

How can I center the modal-dialog vertically and Horizontally in the page?

Answer 1

A jQuery solution, considering the modal-dialog is position absolute/relative/fixed:

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var boxHeight = $('.modal-dialog').height();
var boxWidth = $('.modal-dialog').width();
$('.modal-dialog').css({'left' : ((windowWidth - boxWidth)/2), 'top' : ((windowHeight - boxHeight)/2)});

A jQuery solution, considering the modal-dialog it's not position absolute/relative/fixed:

css:

margin-left: auto;
margin-right: auto;

jquery:

var windowHeight = $(window).height();
var boxHeight = $('.modal-dialog').height();
$('.modal-dialog').css({'margin-top' : ((windowHeight - boxHeight )/2)});

Answer 2

.modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* for IE 8 */
.modal-dialog.ie8 {
    /* you need to specify width and height */
    width: 500px; 
    height: 300px;
    margin-left: -150px; /* 300/2=150 */
    margin-top: -250px; /* 500/2=250 */
}

Answer 3

You must have implemented modal plugin wrong...

A quick css solution would be:

.modal-dialog{
    top: 50%;
    margin-top: -250px; //This should be your modal height/2
}

Answer 4

I believe you can do something like the following, assuming you have absolute or fixed positioning.

var modalWidth = $(".modal-dialog").width();
var modalHeight = $(".modal-dialog").height();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(".modal-dialog").css({"left" : (windowWidth - modalWidth)/2,
"top" : (windowHeight-modalHeight)/2});