CSS实现水平垂直居中的各种方式

原文地址：https://segmentfault.com/a/1190000016389031

个人觉得比较好的是通过flex布局来实现，代码简单，且不受具体宽度和高度的影响：

#modal-root {
            /*弹性盒模型*/
            display: flex;
            /*主轴居中对齐*/
            justify-content: center;
            /*侧轴居中对齐*/
            align-items: center;
            /*below code is not need, just suit for modal container situation*/
            z-index: -1;
            position: fixed;
            top: 50%;
            left: 50%;
            -o-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -khtml-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
}