这个问题分为两部分:

当你不知道模态的确切高度时,你如何将模态垂直地放置在中心? 是否有可能有模态居中,并有溢出:auto在模态体,但只有当模态超过屏幕高度?

我试过用这个:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

当内容远远大于垂直屏幕尺寸时,这给了我所需要的结果,但对于较小的模式内容,这几乎是不可用的。


当前回答

扩展@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;
}

其他回答

将模式中心设置为屏幕

.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-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/

$('#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
    }
});

我的解决方案

.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>

对于定心,我不明白过于复杂的解决方案是什么。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事件会导致高度计算不正确。当然,您可以添加一个事件来调整窗口的大小,如果您需要它的响应。