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

佚名 6年前 (2019-05-07) 随笔 653人围观抢沙发百度已收录

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

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

#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%;
}