使用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%; 
 
}

上面會的所有前綴