利用display:table 和 display:table-cell实现水平垂直居中

刚才在看视频的时候发现一件很有趣的事情，觉得对CSS的理解还不够深入，赶紧记录一下：

需求是这样的：

需求

乍一看，就一个带遮罩的登录页面嘛，用flex就搞定了。不过本人才疏学浅，用flex的话，实现到如下效果还是没问题的（注意高亮处）

利用flex实现

利用flex的确可以比较简单地实现带遮罩层的水平垂直居中，但是由于flex的左边还存在一个sidebar组件，要将遮罩层，按照需求完全覆盖掉sidebar，说起来应该也不太容易。

不过，利用父元素设置position:fixed和top:0,left:0来将遮罩固定在浏览器窗口最左面，并设置display:table，再将子元素（登录组件）的display这是为table-cell,加上vertical-align:middle属性，短短几行代码就解决了这个比较棘手的问题，简直轻松愉快。

遮罩层

.modal-mask {

    position: fixed;

    z-index: 100;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    display: table;

    -webkit-transition: opacity .3s ease;

    transition: opacity .3s ease;

}

登录框

.modal-wrapper {

    display: table-cell;

    vertical-align: middle;

}