一，定位子绝父相，然后子元素定位的上下左右为0，外边距margin居中显示

 <style>
     .big_box{
         width:500px;
         height:500px;
         border:3px solid #f00;
         position:relative;
         /*相对定位*/
     }
     .small_box{
         width:100px;
         height:100px;
         position:absolute;
         /*绝对定位 （子绝父相） */
         
         top:0;
         right:0;
         bottom:0;
         left:0;
         /*定位属性都设置为0*/
         
         margin:auto;
         /*外边距设置自动居中*/
     }
 </style>
 <div class="big_box">
     <div class="small_box"></div>
 </div>

二，定位子绝父相，然后子元素定位的上，左设置50%，然后外边距设置向左，向上往回走子元素的50%

 <style>
     .big_box{
         width:500px;
         height:500px;
         border:3px solid #f00;
         position:relative;
         /*相对定位*/
     }
     .small_box{
         width:100px;
         height:100px;
         position:absolute;
         /*绝对定位 （子绝父相） */
         
         top:50%;
         left:50%;
         /*定位的上和左属性设置为50%*/
         
         margin-top:-50px;
         margin-left:-50px
         /*外边距的上和左往回走子元素的50% */
     }
 </style>
 <div class="big_box">
     <div class="small_box"></div>
 </div>

三.定位子绝父相，然后子元素定位的上，左设置50%，然后子元素使用transform属性平移自己宽高的50%

 <style>
     .big_box{
         width:500px;
         height:500px;
         border:3px solid #f00;
         position:relative;
         /*相对定位*/
     }
     .small_box{
         width:100px;
         height:100px;
         position:absolute;
         /*绝对定位 （子绝父相） */
         
         top:50%;
         left:50%;
         /*定位的上和左属性设置为50%*/
         
        transform:translate(-50%,-50%)
        /*向左向上平移子元素的50%*/
     }
 </style>
 <div class="big_box">
     <div class="small_box"></div>
 </div>

四.将小div转出行内块元素

• 给小div后面，新增一个span标签，给小盒子设置vertical-align:middle;
• 给打盒子设置line-height为大盒子高度(垂直居中)，text-align：center;(文本水平居中)

 <style>
     .big_box{
        width: 500px;
        height: 500px;
        border: 1px solid #f00;
        text-align: center;
        /* 内容水平居中*/
        
        line-height: 500px;
        /* 行高等于高度可以使得内容垂直居中*/
     }
     /* 注意 ： 
     1.如果父元素设置了line-height后，子元素没有设置vertical-align居中的话 
     会使得子元素的位子会位于垂直中心偏上的位子；
     2.反之变成父元素没设置line-height的话，则会使得子元素自会有水平居中，垂直方向只会居上*/
     .small_box{
         width: 100px;
         height: 100px;
         background-color: #00f;
         display: inline-block;
         /* 
             修饰的是行内块
             垂直的对齐方式
             参考谁进行垂直对齐 - 当前行
         */
         
         vertical-align: middle;
         /* 垂直方向居中显示*/
     }
 </style>
 <div class="big_box">
     <div class="small_box"></div>
 </div>

五，弹性盒（适用于手机端口，pc端设置的话，有可能出现bug）

 <style>
     .big_box{
        display:flex;
        /* 变flex容器*/
        justify-content:center;
        /* 主轴方向居中（一般默认为水平方向）*/
        align-items:center;
        /* 交叉轴方向居中（永远于主轴方向垂直）*/
        
     }
 </style>
 <div class="big_box">
     <div class="small_box"></div>
 </div>

六，使用网络布局

<style>
     .big_box{
        width:300px;
        height:300px;
        border:1px solid #000;
        
        display:grid;
        /* 变成grid（网格布局）容器*/
        
        grid-template-rows:100px 100px 100px;
        /* 设置三行 每行100px*/
        
        grid-template-colums:100px 100px 100px;
         /* 设置三列 每行100px*/
         
        grid-template-areas:". . .",". a .",". . ."
        /* 给每个网格命名，每个引号代表一行 */
     }
     .small_box{
         width:100px;
         height:100px;
         background-color:#f00;
         
         grid-area:a;
         /* 引用网格布局的a*/
     }
 </style>
 <div class="big_box">
     <div class="small_box"></div>
 </div>