本文介绍了如何垂直对齐Bootstrap v4模式对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ Bootstrap中的垂直中心模式对话框应该： 即使在设备高度高于所有设备的情况下， 适用于市场份额大于 1％ 的任何设备+不要使用 display：table-cell 或类似的黑客（任何布局技术都不是为了布局而设计的）。 工作无需标记修改 关闭点击的默认Bootstrap示例或 tap .modal-content 之外 限制jQuery /尽可能多的JavaScript 解决方案 SCSS min-height：calc（100vh）; display：flex; flex-direction：column; justify-content：center; 溢出：auto; @media（max-width：768px）{ min-height：calc（100vh - 20px）; 或前缀 CSS ： .modal-dialog { min-height：calc（100vh - 60px）; display：flex; flex-direction：column; justify-content：center; 溢出：auto; @media（max-width：768px）{ .modal-dialog { min-height：calc（100vh - 20px）; $ c 注1：注意完全带有前缀由于某些属性的浏览器支持更改，因此CSS逐渐过时。获取更新前缀CSS的正确方法是： 将前缀不明的CSS复制/粘贴到 Autoprefixer 。 将底部框中的过滤器设置为所需的设置（最大浏览器支持使用> 0％）。 从右侧的框中获取最新的代码。 注2： v4 （ alpha 3或4 ）目前位于 beta 的阶段。您可以通过将以下类添加到 .modal-dialog ： h-100 d-flex flex-column justify-content-center my-0 ...，正如@Androbaut在下面的评论中指出的那样。您仍然需要JavaScript（见下文）关闭点击模式窗口下方/上方的模式窗口 $ b jQuery （需要关闭点击/点击上方/下方的模态）： $（$'$'$'$'）$ $（'。modal-dialog'）。on（'click tap'，function（e）{ if （$（e.target）.hasClass（'modal-dialog'））{ $（'。modal'）。modal（'hide'）; } }） 就是这样。 工作片段，带有完全前缀的CSS和使用不同模式大小的标记： .modal-dialog {min-height：-webkit-calc（100vh - 60像素）; min-height：-moz-calc（100vh - 60px）; min-height：calc（100vh - 60px）;显示：-webkit-box;显示：-webkit-flex;显示：-moz-box;显示：-ms-flexbox;显示：flex; -webkit-box-orient：vertical; -webkit-box-direction：正常; -webkit-flex-direction：column; -moz-box-orient：垂直的; -moz-box-direction：normal; -ms-flex-direction：column; flex-direction：column; -webkit-box-pack：center; -webkit-justify-content：center; -moz-box-pack：center; -ms-flex-pack：center; justify-content：center;溢出：自动; } @media（max-width：768px）{.modal-dialog {min-height：-webkit-calc（100vh - 20px）; min-height：-moz-calc（100vh - 20px）; min-height：calc（100vh - 20px）; }} / *你不需要这行下面的CSS。它主要是美容和调整模式启动按钮* /。模式内容{display：-webkit-box;显示：-webkit-flex;显示：-moz-box;显示：-ms-flexbox;显示：flex; -webkit-box-orient：vertical; -webkit-box-direction：正常; -webkit-flex-direction：column; -moz-box-orient：垂直的; -moz-box-direction：normal; -ms-flex-direction：column; flex-direction：column; } .modal-content> * {-webkit-box-flex：0; -webkit-flex：0 0 auto; -moz-box-flex：0; -ms-flex：0 0 auto; flex：0 0 auto; } .modal-content> * .modal-body {-webkit-box-flex：1; -webkit-flex-grow：1; -moz-box-flex：1; -ms-flex-positive：1; flex-grow：1; }＃Modal_2 .modal-content {min-height：50vh; }＃Modal_3 .modal-content {min-height：85vh; }＃Modal_4 .modal-content {min-height：200vh; } .full-page-center {display：-webkit-box;显示：-webkit-flex;显示：-moz-box;显示：-ms-flexbox;显示：flex; -webkit-box-pack：center; -webkit-justify-content：center; -moz-box-pack：center; -ms-flex-pack：center; justify-content：center; -webkit-box-align：center; -webkit-align-items：center; -moz-box-align：center; -ms-flex-align：center; align-items：center;最小高度：100vh; }完整的页面中心按钮{margin：15px; } @media（max-width：768px）{.full-page-center {-webkit-flex-wrap：wrap; -ms-flex-wrap：wrap; flex-wrap：wrap; } .full-page-center button {display：block;最小宽度：100％; margin：10px 15px; } .full-page-center :: after {display：none; -webkit-box-flex：0; -webkit-flex-grow：0; -moz-box-flex：0; -ms-flex-positive：0; flex-grow：0; }} < link href =https：// < script src =https://ajax.googleapis.com/ajax/ libs / jquery / 2.1.1 / jquery.min.js>< / script>< script src =https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js >< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js>< / script>< ; div class =container full-page-center> < button type =buttonclass =btn btn-primary btn-lgdata-toggle =modaldata-target =＃Modal_1>微小模式< /按钮> < button type =buttonclass =btn btn-default btn-lgdata-toggle =modaldata-target =＃Modal_2>普通模式< /按钮> < button type =buttonclass =btn btn-success btn-lgdata-toggle =modaldata-target =＃Modal_3>大型模式< /按钮> < button type =buttonclass =btn btn-warning btn-lgdata-toggle =modaldata-target =＃Modal_4>非常大的模式< / button>< / div>< div class =modal fadeid =Modal_1tabindex = - 1role =dialogaria-labelledby =modalLabel_1aria-hidden =真> < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_1>微小模式< / h4> < / DIV> < div class =modal-body>我很可爱...< / div> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-primary>保存更改< / button> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =Modal_2tabindex = - 1role =dialogaria-labelledby =modalLabel_2aria-hidden =true> ; < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_2> Dull模式< / h4> < / DIV> < div class =modal-body>我很正常...< / div> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-primary>某些操作< / button> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =Modal_3tabindex = - 1role =dialogaria-labelledby =modalLabel_3aria-hidden =true> ; < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_3>不要叫我胖< / h4> < / DIV> < div class =modal-body>叫我超大。 < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-success>某些操作< / button> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =Modal_4tabindex = - 1role =dialogaria-labelledby =modalLabel_4aria-hidden =true> ; < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_4>巨型模态< / h4> < / DIV> < div class =modal-body>评论，任何人？ < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-warning>某些操作< / button> < / DIV> < / DIV> < / div>< / div> 任何错误或缺点，请让我知道。我会花时间改进答案并保持有用。这个任务的帮助是受欢迎的。 Vertically center modal dialogues in Bootstrap 4. Should:keep modal contents accessible, on all devices, even when taller than device heightwork on any device+browser combination with a market share larger than 1%not use display:table-cell or similar hacks (any layout-ing technique not meant or designed for layout-ing)work on default Bootstrap examples without need of markup modificationsclose on click or tap outside of .modal-content.limit usage of jQuery/JavaScript as much as possible 解决方案 SCSS:.modal-dialog { min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto; @media(max-width: 768px) { min-height: calc(100vh - 20px); }}or unprefixed CSS:.modal-dialog { min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto;}@media(max-width: 768px) { .modal-dialog { min-height: calc(100vh - 20px); }}Note 1: Please note fully prefixed CSS gradually becomes obsolete as browser support for certain properties changes. The right way of getting the updated prefixed CSS is to:copy/paste the unprefixed CSS into Autoprefixer.set the filter in the bottom box to the desired setting (for max. browser support use > 0%).get the latest code from the box on the right.Note 2: This answer was added in early stages of v4 (alpha 3 or 4), which is now currently in beta. You can safely replace the CSS part of this answer by adding the following classes to .modal-dialog: h-100 d-flex flex-column justify-content-center my-0..., as pointed out by @Androbaut in the comment below. You will still need the JavaScript (see below) to close the modal window on click tap below/above the modal window.jQuery (needed to close modal on click/tap above/below):$('.modal-dialog').on('click tap', function(e){ if ($(e.target).hasClass('modal-dialog')) { $('.modal').modal('hide'); }})That's it.Working snippet, fully-prefixed CSS and markup using different modal sizes:$('.modal-dialog').on('click tap', function(e){ if ($(e.target).hasClass('modal-dialog')) { $('.modal').modal('hide'); }}).modal-dialog { min-height: -webkit-calc(100vh - 60px); min-height: -moz-calc(100vh - 60px); min-height: calc(100vh - 60px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: auto;}@media (max-width: 768px) { .modal-dialog { min-height: -webkit-calc(100vh - 20px); min-height: -moz-calc(100vh - 20px); min-height: calc(100vh - 20px); }}/* you don't need the CSS below this line. It's mainly cosmetic and for aligning the modal launch buttons */.modal-content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }.modal-content > * { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;}.modal-content > *.modal-body { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;}#Modal_2 .modal-content { min-height: 50vh;}#Modal_3 .modal-content { min-height: 85vh;}#Modal_4 .modal-content { min-height: 200vh;}.full-page-center { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; min-height: 100vh;}.full-page-center button { margin: 15px;}@media (max-width: 768px) { .full-page-center { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .full-page-center button { display: block; min-width: 100%; margin: 10px 15px; } .full-page-center::after { display: none; -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script><div class="container full-page-center"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal_1"> Tiny modal </button> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2"> Normal modal </button> <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3"> Large modal </button> <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4"> Very large modal </button></div><div class="modal fade" id="Modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modalLabel_1">Tiny modal</h4> </div> <div class="modal-body"> I am cute... </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><div class="modal fade" id="Modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel_2" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modalLabel_2">Dull modal</h4> </div> <div class="modal-body"> I am normal... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Some action</button> </div> </div> </div></div><div class="modal fade" id="Modal_3" tabindex="-1" role="dialog" aria-labelledby="modalLabel_3" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modalLabel_3">Don't call me fat</h4> </div> <div class="modal-body"> Call me "oversized". </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success">Some action</button> </div> </div> </div></div><div class="modal fade" id="Modal_4" tabindex="-1" role="dialog" aria-labelledby="modalLabel_4" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modalLabel_4">Huge modal</h4> </div> <div class="modal-body"> Comments, anyone? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning">Some action</button> </div> </div> </div></div>If you find any bugs or shortcomings please let me know. I will take the time to improve the answer and keep it useful. Help with this task is welcome. 这篇关于如何垂直对齐Bootstrap v4模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
