小开

试试这样做:

.popup__overlay {
position: fixed;
left:  0;
top:  0;
width: 100%;
height: 100%;
z-index: 999;
text-align: center
}
.popup {
display: inline-block;
vertical-align: middle
}

小开

你可能想看看这个div的绝对居中方法集合:http://codepen.io/shshaw/full/gEiDt

小开

最佳答案

我想出了一个纯css解决方案!虽然它是css3，这意味着ie8或更低的不支持，但除此之外，它的测试和工作在ios, android, ie9+， chrome, firefox，桌面safari..

我使用下面的css:

.modal-dialog {
position:absolute;
top:50% !important;
transform: translate(0, -50%) !important;
-ms-transform: translate(0, -50%) !important;
-webkit-transform: translate(0, -50%) !important;
margin:auto 5%;
width:90%;
height:80%;
}
.modal-content {
min-height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.modal-body {
position:absolute;
top:45px; /** height of header **/
bottom:45px;  /** height of footer **/
left:0;
right:0;
overflow-y:auto;
}
.modal-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}

这里有一把小提琴。 http://codepen.io/anon/pen/Hiskj < / p >

．．选择这个作为正确答案，因为在多个情态动词的情况下，没有额外的沉重javascript会让浏览器崩溃。

小开

我的解决方案

.modal-dialog-center {
margin-top: 25%;
}


<div id="waitForm" class="modal">
<div class="modal-dialog modal-dialog-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="headerBlock" class="modal-title"></h4>
</div>
<div class="modal-body">
<span id="bodyBlock"></span>
<br/>
<p style="text-align: center">
<img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
</p>
</div>
</div>
</div>
</div>

小开

$('#myModal').on('shown.bs.modal', function() {
var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
var userScreenHeight = $(document).outerHeight();
if (initModalHeight > userScreenHeight) {
$('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
} else {
$('#modal-dialog').css('margin-top',
(userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
}
});

小开

在我的例子中，我所做的就是在css中设置顶部，知道模态的高度

<div id="myModal" class="modal fade"> ... </div>

在我的CSS中

#myModal{
height: 400px;
top: calc(50% - 200px) !important;
}

小开

我已经从bellow link下载了bootstrap3-dialog，并修改了bootstrap-dialog.js中的open函数

https://github.com/nakupanda/bootstrap3-dialog

代码

open: function () {
!this.isRealized() && this.realize();
this.updateClosable();
//Custom To Vertically centering Bootstrap
var $mymodal = this.getModal();
$mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
$mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
//END
this.getModal().modal('show');
return this;
}

Css

.centerModal .modal-header{
text-align:left;
}
.centerModal .modal-body{
text-align:left;
}

小开

1. 当你不知道模态的确切高度时，你如何将模态垂直地放置在中心?

要在不声明高度的情况下绝对居中Bootstrap 3 Modal，你首先需要覆盖Bootstrap CSS，将其添加到你的样式表中:

.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}

这将使模态对话框位于窗口中心的左上角。

我们必须添加这个媒体查询，否则在小型设备上模式左边距是错误的:

@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}

现在我们需要用JavaScript调整它的位置。要做到这一点，我们给元素一个负的上距和左距，等于它的高和宽的一半。在这个例子中，我们将使用jQuery，因为它是可用的Bootstrap。

$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});

> < /罢工

更新(01/10/2015):

在Finik的回答上添加。感谢以未知为中心。

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


.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}


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

注意到这个负边距了吧?这将删除由内联块添加的空间。该空间导致模式跳转到页面底部@媒体宽度<768 px。

2. 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?

< p > <罢工> 这可以通过给模态体一个overflow-y:auto和max-height来实现。这需要更多的工作才能使其正常工作。首先将这个添加到你的样式表:

.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}

我们将再次使用jQuery来获取窗口高度，并首先设置modal-content的max-height。然后我们必须设置模态体的最大高度，通过用模态标题和模态页脚减去模态内容:

$('.modal').on('shown.bs.modal', function() {
var contentHeight = $(window).height() - 60;
var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;


$(this).find('.modal-content').css({
'max-height': function () {
return contentHeight;
}
});


$(this).find('.modal-body').css({
'max-height': function () {
return (contentHeight - (headerHeight + footerHeight));
}
});


$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});

你可以在这里找到Bootstrap 3.0.3: http://cdpn.io/GwvrJ的工作演示编辑:我建议使用更新的版本来代替一个更灵敏的解决方案:http://cdpn.io/mKfCc

更新(30/11/2015):

function setModalMaxHeight(element) {
this.$element     = $(element);
this.$content     = this.$element.find('.modal-content');
var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin  = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight     = contentHeight - (headerHeight + footerHeight);


this.$content.css({
'overflow': 'hidden'
});


this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}


$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});


$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});

(更新于2015年11月30日

小开

考虑使用这里找到的引导模式插件——https://github.com/jschr/bootstrap-modal

这个插件会集中你所有的情态动词

小开

我写的最普遍的解。动态计算对话框高度。(下一步可能是重新计算窗口大小的对话框的高度。)

JSfiddle: http://jsfiddle.net/8Fvg9/3/

// initialise on document ready jQuery(document).ready(function ($) { 'use strict'; // CENTERED MODALS // phase one - store every dialog's height $('.modal').each(function () { var t = $(this), d = t.find('.modal-dialog'), fadeClass = (t.is('.fade') ? 'fade' : ''); // render dialog t.removeClass('fade') .addClass('invisible') .css('display', 'block'); // read and store dialog height d.data('height', d.height()); // hide dialog again t.css('display', '') .removeClass('invisible') .addClass(fadeClass); }); // phase two - set margin-top on every dialog show $('.modal').on('show.bs.modal', function () { var t = $(this), d = t.find('.modal-dialog'), dh = d.data('height'), w = $(window).width(), h = $(window).height(); // if it is desktop & dialog is lower than viewport // (set your own values) if (w > 380 && (dh + 60) < h) { d.css('margin-top', Math.round(0.96 * (h - dh) / 2)); } else { d.css('margin-top', ''); } }); });

小开

.modal { text-align: center; } @media screen and (min-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }

并调整一点点。fade class，以确保它出现在窗口的顶部边界之外，而不是中心

小开

对于定心，我不明白过于复杂的解决方案是什么。Bootstrap已经为你水平居中，所以你不需要搞砸这个。我的解决方案是只使用jQuery设置顶部边距。

$('#myModal').on('loaded.bs.modal', function() { $(this).find('.modal-dialog').css({ 'margin-top': function () { return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2)); } }); });

我在远程加载内容时使用了loaded.bs.modal事件，而使用show .ba.modal事件会导致高度计算不正确。当然，您可以添加一个事件来调整窗口的大小，如果您需要它的响应。

小开

实现这个概念的方法非常简单你会得到modal总是在你屏幕的模型中通过css as flow: http://jsfiddle.net/jy0zc2jc/1/

你必须通过下面的css将modal类显示为表:

display:table

和modal-dialog作为display:table-cell

见完整的工作例子在给定的小提琴

小开

如果您可以使用flexbox，那么这应该有助于解决问题。

.modal-dialog { height: 100%; width: 100%; display: flex; align-items: center; } .modal-content { margin: 0 auto; }

小开

没那么复杂。

请试试这个:

$(document).ready(function(){ var modalId = "#myModal"; resize: function(){ var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2); $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px'); } $(window).resize(function(){ resize(); }); $(modalId).on('shown.bs.modal', function(){ resize(); }); });

小开

扩展@Finik的精彩回答，这个修复只适用于非移动设备。我在IE8、Chrome和Firefox 22上进行了测试——它可以处理很长或很短的内容。

.modal { text-align: center; } @media screen and (min-device-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }

小开

它可以简单地用display: flex来修复

.modal-dialog { margin-top: 0; margin-bottom: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .modal.fade .modal-dialog { transform: translate(0, -100%); } .modal.in .modal-dialog { transform: translate(0, 0); }

与前缀

.modal-dialog { margin-top: 0; margin-bottom: 0; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); transform: translate(0, 0); }

小开

一个简单的方法。为我工作。谢谢rensdenobel:) http://jsfiddle.net/rensdenobel/sRmLV/13/ < / p >
<style> .vertical-alignment-helper { display:table; height: 100%; width: 100%; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; height:inherit; /* To center horizontally */ margin: 0 auto; } </style>  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div>

小开

使用css有一个最简单的方法:

.modal-dialog { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:500px; height:300px; }

就是这样。注意，它只需要应用于.modal-dialog容器div。

演示:https://jsfiddle.net/darioferrer/0ueu4dmy/

小开

使用这个简单的脚本将情态动词居中。

如果你愿意，你可以设置一个自定义类(例如:.modal。mode -vcenter(而不是.modal)来限制某些模式的功能。

var modalVerticalCenterClass = ".modal"; function centerModals($element) { var $modals; if ($element.length) { $modals = $element; } else { $modals = $(modalVerticalCenterClass + ':visible'); } $modals.each( function(i) { var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); top = top > 0 ? top : 0; $clone.remove(); $(this).find('.modal-content').css("margin-top", top); }); } $(modalVerticalCenterClass).on('show.bs.modal', function(e) { centerModals($(this)); }); $(window).on('resize', centerModals);

还添加了这个CSS修复模式的水平间距;我们在模态上显示滚动，主体滚动被Bootstrap自动隐藏:

/* scroll fixes */ .modal-open .modal { padding-left: 0px !important; padding-right: 0px !important; overflow-y: scroll; }

小开

还有另一个解决方案，它将为window.resize事件和show.bs.modal上的每个可见模态设置有效位置:

(function ($) { "use strict"; function centerModal() { $(this).css('display', 'block'); var $dialog = $(this).find(".modal-dialog"), offset = ($(window).height() - $dialog.height()) / 2, bottomMargin = parseInt($dialog.css('marginBottom'), 10); // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal if(offset < bottomMargin) offset = bottomMargin; $dialog.css("margin-top", offset); } $(document).on('show.bs.modal', '.modal', centerModal); $(window).on("resize", function () { $('.modal:visible').each(centerModal); }); })(jQuery);

小开

下面是另一个css唯一的方法，它工作得很好，并且是基于这个: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ < / p >
萨斯:

.modal { height: 100%; .modal-dialog { top: 50% !important; margin-top:0; margin-bottom:0; } //keep proper transitions on fade in &.fade .modal-dialog { transform: translateY(-100%) !important; } &.in .modal-dialog { transform: translateY(-50%) !important; } }

小开

在移动plantform中，它可能看起来有点不同，这是我的代码。

<div class="modal-container"> <style> .modal-dialog{ margin-top: 60%; width:80%; margin-left: 10%; margin-right: 10%; margin-bottom: 100% } @media screen and (orientation:landscape){ .modal-dialog{ margin-top: 70; width:80%; margin-left: 10%; margin-right: 10%; margin-bottom: 100% } } .modal-body{ text-align: center; } .modal-body p{ margin:14px 0px; font-size: 110%; } .modal-content{ border-radius: 10px; } .modal-footer{ padding:0px; } .modal-footer a{ padding: 15px; } .modal-footer a:nth-child(1){ border-radius: 0px 0px 0px 10px; } .modal-footer a:nth-child(2){ border-radius: 0px 0px 10px 0px; } </style> <h2>Basic Modal Example</h2> <div data-toggle="modal" data-target="#myModal">Div for modal</div> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <p>确定要取消本次订单嘛？</p> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default" data-dismiss="modal">取消</a> <a href="#" class="btn btn-default" data-dismiss="modal">确定</a> </div> </div> </div> </div> </div> </div>

小开

从在这里找到完美的解决方案

$(function() { function reposition() { var modal = $(this), dialog = modal.find('.modal-dialog'); modal.css('display', 'block'); // Dividing by two centers the modal exactly, but dividing by three // or four works better for larger screens. dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2)); } // Reposition when a modal is shown $('.modal').on('show.bs.modal', reposition); // Reposition when the window is resized $(window).on('resize', function() { $('.modal:visible').each(reposition); }); });

小开

var modalVerticalCenterClass = ".modal"; function centerModals($element) { var $modals; if ($element.length) { $modals = $element; } else { $modals = $(modalVerticalCenterClass + ':visible'); } $modals.each( function(i) { var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); top = top > 0 ? top : 0; $clone.remove(); $(this).find('.modal-content').css("margin-top", top); }); } $(modalVerticalCenterClass).on('show.bs.modal', function(e) { centerModals($(this)); }); $(window).on('resize', centerModals);

小开

我知道有点晚了，但我添加了一个新的答案，这样它就不会迷失在人群中。这是一个跨桌面-移动-浏览器的解决方案，在任何地方都能正常工作。

它只需要将modal-dialog包装在modal-dialog-wrap类中，并且需要添加以下代码:

.modal-dialog-wrap { display: table; table-layout: fixed; width: 100%; height: 100%; } .modal-dialog { display: table-cell; vertical-align: middle; text-align: center; } .modal-content { display: inline-block; text-align: left; }

对话框从中心开始，在内容较大的情况下，它只是垂直增长，直到出现滚动条。

这里有一把能用的小提琴供你欣赏!

https://jsfiddle.net/v6u82mvu/1/

小开

这对我来说很管用:

.modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }

小开

我的解决方案:

.modal.in .modal-dialog { -webkit-transform: translate(0, calc(50vh - 50%)); -ms-transform: translate(0, 50vh) translate(0, -50%); -o-transform: translate(0, calc(50vh - 50%)); transform: translate(0, 50vh) translate(0, -50%); }

小开

将模式中心设置为屏幕

.modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }

小开

这是相当老的，并特别要求使用Bootstrap 3的解决方案，但任何人都想知道:从Bootstrap 4有一个内置的解决方案称为.modal-dialog-centered。问题是这样的:https://github.com/twbs/bootstrap/issues/23638

所以在使用v4时，你只需要将.modal-dialog-centered添加到.modal-dialog中，使模态垂直居中:

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Launch demo modal </button>  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Demo

小开

最简单的解决方案是在页面顶部添加模态对话框样式，或者用下面的代码导入css:

<style> .modal-dialog { position:absolute; top:50% !important; transform: translate(0, -50%) !important; -ms-transform: translate(0, -50%) !important; -webkit-transform: translate(0, -50%) !important; margin:auto 50%; width:40%; height:40%; } </style>

模态声明:

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

情态用法:

<a data-toggle="modal" data-target="#exampleModalCenter"> ... </a>

小开

这是响应式代码，也打开不同大小的移动视图，请检查一次。

.modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 20%; vertical-align: middle; margin-right: -4px; } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }

小开

.modal { } .vertical-alignment-helper { display:table; height: 100%; width: 100%; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; height:inherit; /* To center horizontally */ margin: 0 auto; }

<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> </head> <body>  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </body>

CSS:

.modal { } .vertical-alignment-helper { display:table; height: 100%; width: 100%; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; height:inherit; /* To center horizontally */ margin: 0 auto; }

HTML:

 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div>

参考:http://jsfiddle.net/rensdenobel/sRmLV/13/

小开

添加这个简单的css也可以。

.modal-dialog { height: 100vh !important; display: flex; } .modal-content { margin: auto !important; height: fit-content !important; }

提交答案

引导3模态垂直位置中心

更新(01/10/2015):

更新(30/11/2015):