使用CSS垂直对齐Bootstrap模态

Question

我正在尝试使用CSS（或可能比此更优雅的其他解决方案）垂直对齐Bootstrap模态。

下面是一个实例 - http://www.travelersuniverse.com/about - 页面最底部的按钮。

我已经尝试过

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

，但没有运气。模态显示在左上角。

谢谢！

Answer 1

尝试使用下面的代码：

.modal-dialog { 
    position: absolute; 
    margin: 0; 
    transform: translate(-50%,-50%) !important; 
    /*^dont forget to prefixize this^*/ 
    top: 50%; 
    left: 50%; 
} 

Answer 2

.modal-dialog { 
 
    position: absolute; 
 
    margin: 0; 
 
    transform: translate(-50%,-50%) !important; 
 
    -webkit-transform: translate(-50%,-50%) !important; 
 
    -moz-transform: translate(-50%,-50%) !important; 
 
    -o-transform: translate(-50%,-50%) !important; 
 
    -ms-transform: translate(-50%,-50%) !important; 
 
    top: 50%; 
 
    left: 50%; 
 
}

上面会的所有前缀