Bootstrap 3模态垂直位置中心

小编典典

Bootstrap 3模态垂直位置中心

all

这是一个两部分的问题：

当您不知道模态的确切高度时，如何将模态垂直定位在中心？
是否可以使模态居中并在模态主体中具有溢出：自动，但前提是模态超出屏幕高度？

我试过用这个：

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

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

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

当内容远大于垂直屏幕尺寸时，这给了我所需的结果，但对于小的模态内容，它几乎无法使用。

阅读 73

2022-04-27

共1个答案

小编典典

我想出了一个纯 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 会使浏览器陷入瘫痪。

2022-04-27