首先我這裡介紹了簡單的六種方法，以後如果遇到更好的也會補充，也歡迎大家可以來補充！

    <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>