元素水平垂直居中【彈性佈局 || Translate】

/**
* 遊戲排行版
*/
.yblist {
     position: absolute;
     width: 100%;
     height: 100%;
     background: #000;
     opacity: 0.9;
     z-index: 999;
}

/*彈性佈局方法*/
.flex {
     display:-webkit-box; 
     display:-ms-flex; 
     display:-webkit-flex; 
     display:flex;
}
.flex-hc {
     -webkit-box-pack:center; 
     -ms-justify-content:center; 
     -webkit-justify-content:center; 
     justify-content:center;
}
.flex-vc {
     -webkit-box-align:center; 
     -ms-align-items:center; 
     -webkit-align-items:center; 
     align-items:center;
}
/*transform方法*/
.transCenter {
     position: absolute; 
     left:50%; 
     top:50%; 
     -webkit-transform:translate(-50%,-50%); 
     transform:translate(-50%,-50%);
}

  <!-- 排行版 -->

     <!-- /*彈性佈局方法*/ -->
     <div class="yblist flex flex-hc flex-vc">
          <span style='color:#FCF'>21</span>
     </div>

     <!-- /*transform方法*/ -->
     <div class="yblist">
          <span style='color:#FCF' class='transCenter'>21</span>
     </div>