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

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

.modal-content {
  margin: 0 auto;
}

我想出了一个纯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

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

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

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

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

这可以通过给模态体一个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日http://cdpn.io/mKfCc，有以上编辑)

最简单的解决方案是在页面顶部添加模态对话框样式，或者用下面的代码导入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">&times;</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>

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

没那么复杂。

请试试这个:

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