1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;2、table-cell布局 父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）        position: relative / absolute;    /*top和left偏移各为50%*/       top: 50%;       left: 50%;    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/    transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）4、flex 布局    父级：         /*flex 布局*/        display: flex;        /*实现垂直居中*/        align-items: center;        /*实现水平居中*/        justify-content: center;再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);  
      
      
          
    
    
     
      
      
       1
      
      
      
       2
      
      
      
       3
      
    
     
    
     
      
      
       4
      
      
      
       5
      
      
      
       6
      
    
     
    
     
      
      
       7
      
      
      
       8
      
      
      
       9