html 模态框页面居中,如何将Bootstrap模态垂直居中对齐

答案：使用CSSmargin-top属性

默认情况下，Bootstrap模态窗口与页面顶部对齐，并留有一些空白。但是您可以使用一个简单的JavaScript技巧将其垂直对齐在页面中间，如下面的示例所述。此解决方案将动态调整模式的对齐方式，即使用户调整浏览器窗口的大小，也始终将其保持在页面中央。

例试试这个代码»

Vertical Center Alignment of Bootstrap Modal Dialog

$(document).ready(function(){

function alignModal(){

var modalDialog = $(this).find(".modal-dialog");

// Applying the top margin on modal to align it vertically center

modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));

}

// Align modal when it is displayed

$(".modal").on("shown.bs.modal", alignModal);

// Align modal when user resize the window

$(window).on("resize", function(){

$(".modal:visible").each(alignModal);

});

});

Launch Demo Modal

Confirmation

×

Do you want to save changes you made to document before closing?

If you don't save, your changes will be lost.

Close

Save changes