いくつかの方法で達成CSSレベルが垂直方向に中央揃え

 

< DIV クラス= "ボックス" > 
    < DIV クラス= "サブサイズ" > 123123 </ DIV > 
</ DIV > 

CSS：

■は{ 
    ボーダー：1ピクセル赤色固体。
    幅：300ピクセル; 
    高さ：300ピクセル; 
} 

.SUB { 
    背景：緑;    
} 

.sub.size { 
    幅：100pxに。
    高さ：100pxに。
}

：絶対+負のマージン

　　親要素の幅と高さに対して所定の幅と高さの子要素のニーズ

■は{ 
    位置：相対。
} 
.SUB { 
    位置：絶対;; 
    トップ：50％; 
    左：50％;    
    マージントップ：-50px; 
    margin-left：-50px; 
}

二、絶対+マージンオート

　　全方向に距離を設定することにより、その後のマージンを自動に設定され、それはそれぞれの方向にセンタリングされてもよい、0です。子要素は必要な幅と高さを設定します。

■は { 
    位置：相対。
} 
.SUB { 
    位置：絶対。; 
    トップ：0 ; 
    左：0 ; 
    右：0 ; 
    下：0 ; 
    マージン：自動 ; 
}

三、変換+絶対

　　サブ要素は、一定の幅と高さを必要としません。

 

■は { 
    位置：相対。
} 
.SUB { 
    位置：絶対。
    トップ：50％ ; 
    左：50％ ; 
    変換：（-50％、-50％）を変換。
}

 

四、CSS-テーブル

　　新しいCSSテーブルの属性、この機能はまた、水平方向と垂直方向のセンタリングによって達成することができ、私たちは現実の効果のテーブル要素に普通の要素を入れてみましょう

■は、{ 
    表示：表セル。
    テキスト整列：センター ; 
    垂直整列：中央 ; 
} 
.SUB { 
    表示：インラインブロック。
}

5：フレックス

■は { 
    ディスプレイ：フレックス。
    正当化-コンテンツ：センター ; 
    ALIGN-アイテム：センター ; 
}