Center for modal dialogue. Horizontal and vertical

Question

How can I focus the modal dialog vertically and horizontally on the page?

Answer 1

The jQuery solution, given the modal dialog, is an absolute / relative / fixed position:

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)});

JQuery's solution, given the modal dialog, it does not set 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

, , ...

css:

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

Answer 4

, - , , .

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});