Bootstrap 3模态垂直位置中心

CSS

番长樱梅

2020-03-24

这是一个两部分的问题：

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

我试过使用此：

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

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

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

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

第3316篇《Bootstrap 3模态垂直位置中心》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答

斯丁Davaid 2020.03.24

添加此简单的CSS也可以。

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

猴子 2020.03.24

扩展了@Finik的出色答案，此修复程序仅适用于非移动设备。我在IE8，Chrome和Firefox 22中进行了测试-它可以处理很长或很短的内容。

.modal {
  text-align: center;
}
@media screen and (min-device-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

猴子神无 2020.03.24

有一种使用CSS的最简单方法：

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

而已。注意，仅需要将其应用于.modal-dialog容器div。

演示：https : //jsfiddle.net/darioferrer/0ueu4dmy/

神无 2020.03.24

在我的案例中，我所做的就是将CSS的顶部设置为已知模态的高度

<div id="myModal" class="modal fade"> ... </div>

在我的CSS中

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}

小哥西里Itachi 2020.03.24

它可以简单地用 display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

带前缀

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

梅 2020.03.24

我的解决方案：

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}

A小小 2020.03.24

我的解决方案

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>

泡芙 2020.03.24

如果您可以使用flexbox，则可以解决问题。

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

.modal-content {
  margin: 0 auto;
}

神无 2020.03.24

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

这是一个小提琴。 http://codepen.io/anon/pen/Hiskj

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

GO 2020.03.24

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}