Question

如何在页面中垂直和水平居中显示模态对话框？

Answer 1

jQuery解决方案，考虑模态对话框是绝对/相对/固定的位置：

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解决方案，考虑到模态对话框，它不是位置绝对/相对/固定的：

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

将模态对话框水平和垂直居中

4 个答案: