居中模式在twitter-bootstrap

Question

我不能将我的模式放在twitter-bootstrap的不同大小中。您可以查看here和here的实际示例。(只需点击图片或“报告此图像”)。你会看到modal在那里很有魅力，但它不是水平居中的。我尝试了所有方法:边距、浮点数、文本对齐，甚至<center>

.modal：

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

.mode-body：

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

Answer 1

我知道现在有点晚了，但是我找到了所有问题的解决方案，使Bootstrap Modal居中的高度不同于标准高度(1)。

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

Answer 2

无论子元素大小(在本例中为模式)都有效的解决方案。也可用于垂直居中。

.centered {
    left: 50%;
    transform: translateX(-50%);
}

本质上，我们在这里所做的是将元素向右推到父容器宽度的一半。在情态模式的情况下，父级将(应该)是主体。transform属性是将元素拉出其自身宽度的一半。

编辑:垂直居中

.centered {
    top: 50%;
    transform: translateY(-50%);
}

注意:我认为只有当父对象的高度/宽度相同时，水平居中才有效，因为%来自父对象宽度。如果它们不相同，则只使用父高度。

Answer 3

需要居中的不是模态车身，而是整体模态。因为它有固定的定位，所以你可以使用CSS和jQuery (因为jQuery已经被使用了)：

CSS：

.modal { left: 50%; }

jQuery：

$('.modal').each(function(){
  var modalWidth = $(this).width(),
      modalMargin = '-' + (modalWidth/2) + 'px!important';
  $(this).css('margin-left',modalMargin);
});

或者，也可以只使用CSS：

.modal { 
  width: 100%;
  left: 0;
  background-color: transparent; }

.modal-body { 
  display: inline-block; 
  background-color: #FFF; }

.modal img { min-width: none!important; }