这个问题分为两部分:
当你不知道模态的确切高度时，你如何将模态垂直地放置在中心? 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远远大于垂直屏幕尺寸时，这给了我所需要的结果，但对于较小的模式内容，这几乎是不可用的。
当前回答
我想出了一个纯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会让浏览器崩溃。
其他回答
试试这样做:
.popup__overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
text-align: center
}
.popup {
display: inline-block;
vertical-align: middle
}
.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;
}
并调整一点点。fade class，以确保它出现在窗口的顶部边界之外，而不是中心
使用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/
最简单的解决方案是在页面顶部添加模态对话框样式，或者用下面的代码导入css:
<style>
.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 50%;
width:40%;
height:40%;
}
</style>
模态声明:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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>
情态用法:
<a data-toggle="modal" data-target="#exampleModalCenter">
...
</a>
这是相当老的，并特别要求使用Bootstrap 3的解决方案，但任何人都想知道:从Bootstrap 4有一个内置的解决方案称为.modal-dialog-centered。问题是:https://github.com/twbs/bootstrap/issues/23638
所以使用v4，你只需要添加.modal-dialog- centric到.modal-dialog来垂直居中模态:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- 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">×</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>
Demo
