纯css实现模态框动态垂直居中

纯css实现模态框动态垂直居中

一个垂直居中的思路，不止限于模态框

用bootstrap模态框时，常见的几种垂直居中方法是：

1.在打开时用js计算

$('#model').on('shown.bs.modal', function (e) {
    $(this).css('display', 'block');
    var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height()/ 2;
    $(this).find('.modal-dialog').css({
        'margin-top': modalHeight
    });
});

但这种有个缺陷，如果模态框里内容改变时，模态框大小也会跟着变，此时就无法垂直居中了。

2.利用translate:50%是指自身高度50%

.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;
}

用css实现的好处就是可以动态垂直居中，但这又出现了其他问题，如果模态框高度大于浏览器时，上部分无法显示，并且高度是奇数时，模态框中的文字会糊。

3.完美解决方案

.modal{
    text-align: center;
}
.modal:after {
    display: inline-block;
    height: 100%;
    margin-left: -0.05em;
    content: "";
    vertical-align: middle;
}
.modal-dialog {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

我们知道vertical-align:middle;的居中是基于line-height的，但line-height:100%;是

相对于字体尺寸的，这就尴尬了。。。

这方法通过在要居中的对象后面加一个高度100%的:after伪类，两者都display:inline-block;vertical-align:middle;

也就相当于要居中的对象要和一个高度100%的对象中线对齐，

而:after对象因为没有宽度，所以不占用空间，从达到了垂直居中的目的。