垂直居中的Bootstrap模式窗口

181

我想将模态集中在视口（中间），我试图添加一些CSS属性 

 .modal { position: fixed; top:50%; left:50%; }

我正在使用此示例http://jsfiddle.net/rniemeyer/Wjjnd/

我试过了 

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })
javascript  twitter-bootstrap  bootstrap-modal 
— 用户名
source
尝试覆盖.modal.fade.in也是如此
— haim770
— John Magnolia
3
试试这个zerosixthree.se/… 我使用：.modal.fade.in {top：50％; 转换：translateY（-50％）; }
— jowan sebastian 2014年
添加了flexbox解决方案（translateY(-50%)当模态内容高于设备高度时，该方法将无法访问模态顶部）。
— tao 2016年
从引导程序4开始，以模态对话框为中心，不再需要这样做。请在下面查看该答案。
— jcaruso

Answers:

258

这可以完成工作：http : //jsfiddle.net/sRmLV/1140/

它使用了一个helper-div和一些自定义的CSS。无需javascript或jQuery。

HTML（基于Bootstrap的演示代码）

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

的CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
— 诺贝尔奖
source
使用此解决方案时，由于高度：100％；宽度：100％；您无法通过单击模态来关闭模态。您能想到解决此问题的方法吗？
— pcatre 2014年
1
好的，此解决方案似乎很好用（除了它使我无法通过单击退出模态来关闭模态）。但是不知何故，它使我的某些带有量角器的e2e测试失败了（而且我找不到原因，这不像是一个错误）。无论如何，我要回到javascript答案，这样我就不会浪费更多时间。但是就像我说的那样，这似乎很好用，只是警告人们用量角器进行端到端测试要当心。
— pcatre 2014年
3
@pcatre，谢谢你的提示！我已经对此代码进行了修复。设置指针事件：无；对齐类上的技巧就可以了。在IE11，最新的Chrome，Firefox和iOS Safari中进行了测试。
— RNobel 2014年
4
不知道它是否已更新，因为用户的评论说，单击内部模态元素后它不起作用，但是使用上面的小提琴中的示例，到目前为止，这对我来说100％起作用。非常感谢您的帮助和上面的所有评论。
— Michael G
2
从引导程序4开始，以模态对话框为中心，不再需要这样做。请在下面查看该答案。
— jcaruso
94

由于gpcola的答案对我不起作用，因此我对其进行了一些编辑，使其立即可用。我使用“ margin-top”代替了转换。另外，我使用“ show”而不是“ shown”事件，因为在此之后，我的定位跳得很差（当您启动自举动画时可见）。在定位之前，请确保将显示设置为“ block”，否则$ dialog.height（）将为0，并且模式不会完全居中。

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));
— 阿拉尼
source
6
这是完美的！只是在第4行中使用$（window）.height（）来代替$（document）.height（）正确，而且我将最后一行更改为： $('.modal:visible').each(centerModal);
— Denis Chmel 2014年
非常适合我，谢谢。使用此代码时，还必须将modal-dialog的padding顶部和底部设置为0px，以实现完美居中。
— 米纳·莫萨利
如果模态高于窗口的高度，则会中断。因此，我在设置对话框的页边距顶部之前添加了以下行： if(offset < 0) offset = 0; 我将整个模块粘贴到不清楚的答案中！
— jetlej 2014年
我在下面的答案中添加了一些其他更改，以使顶部边距等于模态底部边距
— jetlej 2014年
完美，缺少$（this）.css（'display'，'block'）; 所有的时间和心思，为什么高度为0
— JānisGruzis 2014年
80

这就是我为我的应用所做的。如果您查看bootstrap.css文件中的以下类，.modal-dialog的默认填充为10px和@media屏幕，（最小宽度：768px）.modal-dialog的顶部填充为30px。因此，在我的自定义css文件中，我将所有屏幕的顶部填充设置为15％，而未指定媒体屏幕宽度。希望这可以帮助。

.modal-dialog {
  padding-top: 15%;
}
— 用户名
source
6
这仅适用于小型警报盒，不适用于
— 较大的警报
您可以只适用于小模式：.modal-dialog.modal-sm { padding-top:15%; }
— Dunc
61

我为所有HTML5浏览器找到的最佳方法：

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}
— 塔哈·沙希德（Taha Shahid）
source
2
我喜欢这个解决方案，非常干净。不知道台式机或旧版本的Safari浏览器，但它似乎是在iOS 8细
— 萨科GALLER
1
是的，我同意@NicolasGaller。它对我也很好。我在Chrome和Firefox中进行了测试。它运作良好。
— Manjunath Reddy
2
这是一个很棒的CSS渐进增强功能。不需要js，并且任何不支持flexbox的浏览器都将获得默认的引导程序模式放置。
— Craig Harshbarger '16
关闭，但是如果页面上有多个模式，则无法关闭模式。请参阅下面的我的答案进行修复。
— 罗伯特·麦基
1
更新：添加align-items: center;到body.modal-open .modal似乎可行。
— 伯尼
20 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

//样式

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
— 用户名
source
3
这是普遍答案。我不知道为什么没人投票赞成。
— 卡萨巴·托斯
3
我至少浏览了4个SO条目，每个条目都有许多建议。顺便说一句，在HTML5时代，它至少应该内置在某些框架的功能中。而不是杂耍。
— 卡萨巴·托斯
1
另请注意：如果您为表格样式说width：100％，则将获得水平居中（以防万一该模式没有被隐藏）。
— Csaba Toth 2014年
1
迄今为止最好的答案。这将创建一个滚动条，但是您可以通过将.modal-open .modal {overflow-y：隐藏；}
— Christophe
14

在.modal.fade.in中覆盖top参数以强制在您的自定义声明中设置值，请!important在top之后添加关键字。这将迫使浏览器使用该值，而忽略关键字的任何其他值。这样做的缺点是您无法在其他任何地方覆盖该值。

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}
— 亚历山大·瓦尔维克
source
这可以防止我在单击有关模态的背景时关闭模态。
— Scott Simpson
13

从Bootstrap 4开始，添加了以下类，以在没有JavaScript的情况下为您实现这一目标。

modal-dialog-centered

您可以在此处找到其文档。

感谢vd指出，您需要将.modal-dialog-centered添加到.modal-dialog中，以将模态垂直居中。

— 卡鲁索
source
1
这是引导程序4的最佳答案
— 。– broc.seib
通过同时添加模态对话框和以模态对话框为中心的方法，效果更好
— vd19年
1
@vd thats可以理解，因为文档说：“将.modal-dialog-centered添加到.modal-dialog以使模式垂直居中。” 我将更新我的答案，以反映给那些不了解的人。
— jcaruso
12

这完全适合我：

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

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

完整的演示 URL：https : //codepen.io/dimbslmh/full/mKfCc

— 阿米尔·侯赛因·马尼安
source
11

您可以使用：

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

将其垂直和水平居中。

— 阿里·阿蒙（Aryeh Armon）
source
2
这是使用CSS而不使用Flex的真正“方法”。上下文是Bootstrap还是模态的事实应该是无关紧要的。所有其他答案都过于矫kill过正。
— ESR
1
使用此方法，如果模态比设备屏幕的高度高，则模态的顶部变得不可访问。
— tao
11

因为此处的大多数答案无效，或仅部分有效：

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

您必须使用[style]选择器仅将样式应用于当前处于活动状态的模式，而不是所有模式。 .in本来不错，但似乎只有在过渡完成后才添加，为时已晚，并且会导致某些非常糟糕的过渡。幸运的是，bootstrap似乎总是在开始显示时就一直在样式上应用样式属性，因此这有点hacky，但它可以工作。

该:not([style='display: none;'])部分是一种解决方法，可引导您没有正确删除样式属性，而是在关闭对话框时将样式显示设置为无。

— 罗伯特·麦基
source
太好了谢谢。实际上，这是2016
— 。– AlexioVay '16
4年过去了。仍然有用。谢了哥们！
— 哈桑·诺曼尼
8

您可以像这样在Bootstrap 3模态上实现垂直对齐中心：

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

并将此css类添加到“模态对话框”容器中

<div class="modal-dialog modal-vertical-centered">
...

jsFiddle工作示例：http : //jsfiddle.net/U4NRx/

— 埃古雷利
source
如何使对话框垂直居中？
— gkalpak
在大多数地方都可以使用，但是在低于Android 4.4的包装式html5应用程序中则无法使用。
— 乔什（Josh）
3
我的模态与此有关
— Dorian
1
对！我使用：.modal.fade.in {顶部：50％; 转换：translateY（-50％）; }
— jowan sebastian 2014年
只需将50％修改为15％，然后对话框就会在窗口的中央。.modal-vertical-centered {变换：translate（0，15％）！important; -ms-transform：translate（0，15％）！important; / * IE 9 / -webkit-transform：translate（0，15％）！important; / Safari和Chrome浏览器* /}
— Haimei 2015年
8

最干净，最简单的方法是使用Flexbox！以下内容将在屏幕中央垂直对齐Bootstrap 3模式，并且比此处发布的所有其他解决方案更干净，更简单：

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

注意：虽然这是最简单的解决方案，但由于浏览器支持，它可能不适用于所有人：http : //caniuse.com/#feat=flexbox

看起来（通常）IE落后了。就我而言，我为自己或为客户开发的所有产品都是IE10 +。（在可以用于实际开发产品并更快地获得MVP的情况下，投资开发时间来支持旧版本的IE并没有商业意义）。这当然不是每个人都拥有的奢侈品。

我已经看到较大的站点可以检测是否支持flexbox并将一个类应用于页面的主体-但是前端工程的水平非常强大，并且您仍然需要一个后备。

我鼓励人们拥抱网络的未来。Flexbox非常棒，如果可以的话，您应该开始使用它。

PS-这个网站确实帮助我掌握了flexbox的整体并将其应用于任何用例：http ://flexboxfroggy.com/

编辑：在一页上的两个模式的情况下，这应适用于.modal.in

— 格雷格·布拉斯（Greg Blass）
source
否则效果很好，但结束动画效果不佳。
— user2061057
是否应该能够通过CSS3转换完成动画？
— 格雷格·布拉斯
7

优点：

  • 模态内容即使高于设备也可访问
  • 不使用display:table-cell（这并不意味着布局）
  • 不需要对默认的Bootstrap 3模式进行任何修改 markup
  • 定位是纯CSS。添加了JS，用于关闭其上方和下方的click / tap模式
  • 我包括未加前缀SCSS为那些谁使用gulp或grunt

显示代码段

注意：我打算使这个答案与最新的Bootstrap 3规范保持一致。对于Bootstrap 4解决方案，请参见此答案（目前它们或多或少是相同的，但随着时间的推移它们可能会有所不同）。如果您发现任何错误或问题，请告诉我，我将进行更新。谢谢。

干净，无前缀SCSS（与gulp/结合使用grunt）： 

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}
— tao
source
2
最佳解决方案IMO。
— Radmation
3

另一个CSS解决方案。对于大于视口的弹出窗口不起作用。

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

在.modal-dialog课堂上，将位置改写为绝对（相对），并将内容居中right:0, left: 0

在.modal.fade .modal-dialog , .modal.in .modal-dialog设置过渡动画top而不是平移时。

margin-top如果弹出式窗口较小，而弹出式窗口较长，则将弹出式窗口略微移至中心下方。因此margin-top:0, margin-bottom:0

需要进一步完善。

— 普拉文
source
3

对于那些使用angular-ui引导程序的用户，可以根据以上信息添加以下类：

注意：不需要其他更改，它将解决所有模态。

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
— Jyotirmoy Pan
source
3

无需我们使用javascript。Boostrap模态在出现时会添加.in类。只需使用flex CSS修改modalclassName.fade.in的此类组合即可。

添加此css可以使模态垂直和水平居中。

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}
— 没有人
source
2

我的选择，只有一点CSS ：（不适用于IE8）

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

您可以使用第一条规则来更改模态的显示方式。

使用：Bootstrap 3.3.4

— 约翰·伯纳森
source
2

只需将以下CSS添加到您现有的CSS中，对我来说效果很好

.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;
}
— 香卡（Shankar Prakash）G
source
2

基于Arany的答案，还考虑了页面滚动。

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));
— 马修
source
2

我认为这比Rens de Nobel的解决方案更纯净的CSS解决方案。同样，这也不会阻止通过单击对话框外部来关闭对话框。

http://plnkr.co/edit/JCGVZQ?p=preview

只需将一些CSS类与.modal-dialog类一起添加到DIV容器中，即可获得比引导CSS高的特异性，例如.centered。

的HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

并使此.modal-dialog.centered容器固定并正确定位。

的CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

甚至使用flexbox更简单。

的CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}
— 维特·库马尔
source
此Flexbox版本无法正常工作。在最新的Chrome（52.0.x）上进行测试，.modal-dialog正确居中，但其内容交互似乎在旧的地方冻结了（很奇怪）。但是，您可以尝试在.modal-dialog（而不是.modal）上使用此技术，并且通过其他一些属性，它确实可以工作。=）
— giovannipds
1

这在BS3中有效，未在v2中进行测试。它使模态垂直居中。请注意，它会在那里过渡-如果您希望它只出现在位置transition，请为CSS编辑CSS 属性.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});
— gpcola
source
1 
e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });
— 汤姆
source
您能否弄清楚答案中的功能“ e”是什么？
— Michael Butler 2014年
1

这将接受Arany的回答，并使其在模态高于屏幕高度时可以使用： 

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});
— 杰特莱
source
嘿@jetlej，为什么不编辑Arany的答案以包括这个？您解决了他的代码中的一个大错误。
— pcatre 2014年
@pcatre-我不知道可以提交修改！感谢您指出这一点
— jetlej 2014年
1

要将垂直模式居中添加到引导程序modal.js中，我在Modal.prototype.show函数末尾添加了此代码：

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});
— 安德拉
source
如果对话框一旦显示就更改了高度，则由于页面大小调整或其中的内容扩展/折叠而无法正常工作。
— Dirbaio 2015年
0

使Modal垂直对齐“全部中间”对话框。

/* 注意：

1.即使您不需要分配选择器，它也会从文档中找到所有模态并将其垂直居中

2.为了避免中间某些特定的模态成为中心，您可以在点击事件中使用：not选择器

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

从米兰潘迪

— 用户名
source
0

使用此简单脚本将模态居中。

如果需要，可以设置一个自定义类（例如：.modal.modal-vcenter而不是.modal），以将功能仅限制为某些模态。

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

还要为模态的水平间距添加此CSS修复程序；我们在模态上显示了滚动条，Bootstrap自动隐藏了主体滚动条：

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}
— 拉克什·瓦德纳尔
source
0

此问题的另一个CSS答案...
此解决方案仅使用CSS即可达到所需的效果，同时仍保持通过单击模态来关闭模态的能力。它还允许您设置最大.modal-content高度和最大宽度，以使弹出窗口不会超出视口。当内容超出模态大小时，将自动显示滚动条。

注意：
建议的Bootstrap .modal-dialog div应该省略，以使其正常工作（似乎没有破坏任何东西）。已在Chrome 51和IE 11中测试

。CSS代码：

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

编辑： 在.modal-dialog类允许您选择一个用户是否可以通过单击模式本身以外关闭模式。大多数模态都有一个明确的“关闭”或“取消”按钮。使用此替代方法时，请记住这一点。

— 桑切斯
source
0

最好用宽度和高度集中模态的最佳解决方案是在css add和modal中将此“集中”作为一个类。

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }
— 约格什·赫特
source
0

垂直居中 将.modal-dialog- centered 添加到.modal-dialog以垂直居中模态

启动演示模态 

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
— 泰亚布·罗伊（Tayyab Roy）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.