css - 在 twitter-bootstrap 中居中模态

Question

我无法在各种尺寸的 twitter-bootstrap 中将我的模态居中。你可以看到活生生的例子 here和 here . (只需单击图片或“报告此图片”)。您会看到模态在那里像魅力一样工作，但它不是水平居中的。我尝试了一切:边距、 float 、文本对齐，甚至 <center>

.模态:

.modal {
      position: fixed;
      top: 10%;
      z-index: 1050;
      width: auto;
      background-color: #ffffff;
      border: 1px solid #999;
      border: 1px solid rgba(0, 0, 0, 0.3);
      *border: 1px solid #999;
      -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
              border-radius: 6px;
      outline: none;
      -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
         -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
              box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      -webkit-background-clip: padding-box;
         -moz-background-clip: padding-box;
              background-clip: padding-box;
    }

.modal-body:

.modal-body {
 margin: 0 auto 0 auto;
  position: relative;
  padding: 15px;
  overflow-y: auto;
}

Answer 1

我知道有点晚了，但我找到了解决所有问题的方法，即以不同于标准(一个)的高度将 Bootstrap 模态居中。

$("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});