Bootstrap模态框水平垂直居中

找了好久, 一直没找到使用纯css的方法, 下面是结合css和js的方法, 欢迎提出更好的方法.

css如下:

/* 覆写自带的样式 */.modal-dialog {    position: absolute;    top: 50%;    left: 50%;    z-index: 3;    margin: auto;     -webkit-transform: translate(-50%, -50%) !important;    -moz-transform: translate(-50%, -50%) !important;    -ms-transform: translate(-50%, -50%) !important;    -o-transform: translate(-50%, -50%) !important;    transform: translate(-50%, -50%) !important;}

由于上面的transform在ie8下不能用, 所以才有了下面的js:

$modal.on('shown.bs.modal', function(event) {    var ieVersion = getIEVersion();    // 非ie或者ie9+使用css已经可以了    if (ieVersion === false || ieVersion > 8) {        return true;    }    var $modalDialog = $modal.find('.modal-dialog'),        h = $modalDialog.height(),        w = $modalDialog.width();    $modalDialog.css({        marginLeft: -w / 2,        marginTop: -h / 2    });});// 兼容ie9及以下版本function getIEVersion() {    var v = 3,        div = document.createElement('div'),        beacon = div.getElementsByTagName('i');    while (        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',            beacon[0]        );    return v > 4 ? v : false;}