Bootstrap 3模式垂直位置中心

一尘不染

Bootstrap 3模式垂直位置中心

css

这是一个两部分的问题：

当您不知道模态的确切高度时，如何将模态垂直放置在中心？
仅在模态超过屏幕高度的情况下，模态才能居中并在模型主体中具有overflow：auto吗？

我试过使用此：

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

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

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

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

阅读 311

2020-05-16

共1个答案

一尘不染

我想出了一个纯CSS解决方案！不过它是css3，这表示不支持ie8或更低版本，但除此之外，它已经过测试并可以在ios，android，ie9+，chrome，firefox，桌面浏览器上使用。

我正在使用以下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;
}

..选择此为正确答案，因为在使用多个模式时，没有多余的JavaScript会使浏览器屈服。

2020-05-16