这个问题分为两部分:
当你不知道模态的确切高度时，你如何将模态垂直地放置在中心? 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远远大于垂直屏幕尺寸时，这给了我所需要的结果，但对于较小的模式内容，这几乎是不可用的。
当前回答
您可能想要查看这个div绝对居中的方法集合:http://codepen.io/shshaw/full/gEiDt
其他回答
如果您可以使用flexbox，那么这应该有助于解决问题。
.modal-dialog {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.modal-content {
margin: 0 auto;
}
扩展@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;
}
这对我来说很管用:
.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;
}
试试这样做:
.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;
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;
}
