CSSスタイル水平方向と垂直方向のセンタリング方法

水平中心（ブロック中心を含む）

1.固定幅、自動に左右の余白。（従来のブロックフローカートリッジ、弾性プロジェクト[固定されていない幅]）

例：ボックスの幅に提供BOX1は、その後、余白設定：自動;

< スタイル> 
    .box1 { 
        幅：200pxの。
        高さ：200pxの。
        背景色：黒。
        マージン：自動; 
    } 
</ スタイル> 

< 身体> 
    < divのクラス= "ボックスすべて" > 
        < divのクラス= "BOX1" > </ DIV > 
    </ DIV > 
</ ボディ>

その効果：

 

 

 

柔軟なポーチが正当化コンテンツを設定する2：センターを、弾力プロジェクトが主軸を中心としましょう。（ユニバーサル適応）

例：弾性ボックス、および親要素のアラインメント。

< スタイル> 
    ■は全て{ 
        表示：フレックス; 
        正当化-コンテンツ：センター; 
    } 
    
    .box1 { 
        幅：200pxの。
        高さ：200pxの。
        背景色：黒。
    } 
</ スタイル> 

< 身体> 
    < divのクラス= "ボックスすべて" > 
        < divのクラス= "BOX1" > </ DIV > 
    </DIV > 
</ ボディ>

その効果：

3.親要素配置テキスト整列：センター、カートリッジ内行せ、カートリッジセンタリングブロック（テキスト）。

例：ボックスのテキスト整列に設定してください：センター;自動センタリングテキスト。

< スタイル> 
    P { 
        テキスト整列=左：センター; 
    } 
</ スタイル> 

< 身体> 
    < divのクラス= "箱-すべて" > 
        < P >これはテキストの段落があります。</ P > 
    </ DIV > 
</ ボディ>

その効果：

 

 

 

4.要素、マージン左の相対位置：50％;変換：移動X（-50％）。[マージン、パーセンテージを含むブロックの幅に対するパディング] [究極の解決策]

例：カセットのプロパティ相対位置決めは、提供されるような上記のように配置されています。

< スタイル> 
    .box1 { 
        幅：200pxの。
        高さ：200pxの。
        背景色：黒。
        位置：相対; 
        余白左：50％; 
        変換：移動X（-50％） 。
    } 
</ スタイル> 

< 身体> 
    < divのクラス= "ボックスすべて" > 
        < divのクラス= "BOX1" > </ divの> 
    </ DIV > 
</ ボディ>

その効果：

垂直中心（上記と同様の方法を、私は実証していない）

1行のテキストがブロックの高さを含む親要素の垂直に配置された行の高さを中心。

弾性サイドプロジェクトが軸を中心とするように、中心2.柔軟ポーチは、ALIGN-アイテムが配置されています。

前記上部要素の相対的な位置決め、：50％変換：移動Y（-50％）。[究極]プログラム