实现一个元素在当前窗口垂直水平居中的几种方法

首先我这里介绍了简单的六种方法，以后如果遇到更好的也会补充，也欢迎大家可以来补充！

    <div class="wrap">
            <div class="box"></div>
            <span></span><!--这句只有在第四种情况下使用-->
    </div>

   <style>
            *{margin: 0;padding: 0;}
            .wrap{margin:20px auto;width: 300px;height: 300px;border: 1px red solid;}
            .box{width: 100px;height: 100px; border: 1px red solid;}
            
            /* 一：定位 前提已知子元素高度宽度*/
            .wrap{position: relative;}
            .box{position: absolute;top: 50%;left: 50%;margin: -50px 0 0 -50px;}
            
            /* 二：定位 */
            .wrap{position: relative;}
            .box{position: absolute;left: 0;right: 0;top:0;bottom: 0;margin: auto;}
            
            /* 三：给子元素设置display:inline-block，父元素设置行高*/
            .wrap{line-height: 300px;text-align: center;}
            .box{display: inline-block;vertical-align: middle;}
            
            /* 四：给子元素设置display:inline-block，给参照物span设置display:inline-block，高度百分百，垂直居中*/
            .wrap{text-align: center;}
            .box{display: inline-block;vertical-align: middle;} 
            span{display: inline-block;height: 100%;vertical-align: middle;}
            
            /* 五：设置父元素display:table-cell 子元素display: inline-block/inline*/
            .wrap{display: table-cell;text-align:center;vertical-align: middle;}
            .box{display: inline-block;}
            
            /* 六：弹性盒子 */
            .wrap{display: flex;justify-content: center; align-items: center;}
            
        </style>