css 3上下中央

3つ目は、親にスタイルを追加することです.先にこのいくつかを书いて、十分にみんなが使って、また伪类を通じて中央の効果を実现して、兴味のあるのは自分でたたいてみることができます
最初のcss 3のtransformはサブレベルに書かれています

.ele{
    display:inline-block;
/*        */
    position:absolute;
/*top 50%*/
    top: 50%;
/*left 50%*/
    left: 50%;
/*css3   transform   */
    transform: translate(-50%, -50%);
}

2番目のflexボックスのレイアウトは親に書かれています

.ele{
/*     */    
    display:flex;
/*      */
    justify-content: center;
/*      */    
    align-items: center;  
 }

第3種displayのtable-cell

.box{
/*           */
    display:table-cell;
/*        */
    text-align:center; 
/*        */
    vertical-align:middle;     
}

第四種類:絶対位置:子に書く、親に書く相対位置

.div{
   position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}