divの水平垂直方向の中心

<DIV CLASS = "親"> 
  <DIV CLASS = "子"> </ div> 
</ div>

 

1、

div.parent { 
    ディスプレイ：フレックス。
    正当化 - コンテンツを：センター; 
    整列 - アイテム：センター; 
}

 

2、

div.parent { 
    位置：相対。
} 
div.child { 
    位置：絶対。
    トップ： 50％; 
    左： 50％; 
    変換：（翻訳 -50％、-50％ ）。  
} 
/ * 或者* / 
div.child { 
    幅は50px。
    高さ：10pxの; 
    位置：絶対; 
    トップ： 50％; 
    左： 50％; 
    マージン -left： - 25ピクセル; 
    マージン -top： - 5pxの; 
} 
/ * 或* / 
div.child { 
    幅は50px。
    高さ：10pxの; 
    位置：絶対; 
    左： 0 ; 
    トップ： 0 ; 
    右： 0 ; 
    下： 0 ;
    

 

3、

div.parent { 
    表示：グリッド。
} 
div.child { 
    正当化 - 自己：センター; 
    合わせ - 自己：センター; 
}

 

4、

div.parent { 
    フォント -size：0 。
    テキスト - 揃える：センター;
    ＆:: {の前に
        内容： "" ; 
        表示：インライン - ブロック。
        幅： 0 ; 
        高さ： 100％; 
        垂直 - 整列：中央; 
    } 
} 
div.child { 
  表示：インライン - ブロック。
  垂直 - 整列：中央; 
}

 

5、

div.parent { 
ディスプレイ：テーブルと 
} 
div.child { 
表示：表 - 細胞
垂直 - 整列：中央; 
テキスト - 揃える：センター; 
}