CSSの幅可変水平高垂直中心div要素

レンダリング：

この方法の一つ：

このdiv要素は、インラインブロックする必要があります：

「ゴースト」擬似要素（見えない擬似要素）とインライン・ブロック/垂直整列センターは、非常に巧妙な扱うことができます。しかし、この方法は、インラインブロックであるセンタリングされる要素を必要と真にユニバーサルな解決策ではありません。IE8と互換性があります。

<！DOCTYPE HTML > 
< HTML のlang = "EN" > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
    
        .block { 
          テキスト整列：センター。
          背景：#abcdef 。
        } 

        .block：前{ 
          内容：'' 。
          ディスプレイ：
          高さ：100％; 
          垂直整列：中央; 
          マージン右：-0.25em 。 / * 間隔のために調整* / 
        } 

        .centered { 
          表示：インラインブロック。
          垂直整列：中央; 
          幅：50％; 
          国境：1pxの固体赤。
        } 

    </ スタイル> 
</ ヘッド> 
< 身体>

    < 本部クラス= "ブロック" スタイル= "高さ：300ピクセルによる;" > 
        < divのクラス= "中心" > 
            < H1の>ケースタイトル</ のH1 > 
            < P >ケースコンテンツの例コンテンツの場合、コンテンツの場合、コンテンツ例のコンテンツ</ P > 
        </ DIV > 
    </ DIV > 

</ ボディ> 
</ HTML >

コードの表示

方法2：

CSS3（シンプル、欠点は相性が良くないということです）

;フレックス：ディスプレイの実行

を正当化-コンテンツ：センター; //サブ要素が水平方向中央に配置され

ALIGN-アイテム：センター;上下中央//子要素

方法3：

このアプローチと同じの私たちの固定面が、我々は変換マージンを使用しません（）

コードを貼り付けます。

<！DOCTYPE HTML > 
< HTML のlang = "EN" > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < タイトル>不固定高度DIV写法</ タイトル> 
     < スタイル> 
        .center { 
          位置：固定されました。
          トップ：50％; 
          左：50％; 
          背景色：#abcdef 。
          幅：50％;
          高さ：50％; 
          変換：移動X（-50％）、移動Y（-50％） 。
        } 
     </ スタイル> 
</ ヘッド> 
< 身体> 
    < divのクラス= "センター" > </ DIV > 
</ ボディ> 

</ HTML >

コードの表示

方法4：

使用マージン：自動垂直センタリング

マージン値はautoです、それは私たちが残りのスペースを割り当てることができます！中心とする; 0オート：私たちは、マージンにブロックレベル要素があることを知っています！自動、左と右のそれをすべての真ん中：マージンに余裕を取得する方法がないこと？すべてのアップと真ん中、我々は我々が垂直方向にそれを中心に達成することができます！

答えは限り我々が作るとダウンするのに十分なスペースを持っているとして、あなたは自動マージンが上から下にスペースを割り当てることをさせることができ、yesです。

マージンについての十分な余地ダウンするように我々は、配置を使用することができます！垂直方向の中央を達成するために、オート：次に、あなたは余裕を使用することができます！

コードを貼り付けます。

<！DOCTYPE HTML > 
< HTML のlang = "EN" > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < タイトル>不固定高度DIV写法</ タイトル> 
     < スタイル> 
        .father { 
            位置：固定されました。
            幅：100％; 
            高さ：100％; 
            トップ：0 ; 
            左：0 ;
            背景色：RGBA（0,0,0、0.7） 。
        } 
        .son { 
             位置：絶対。
             トップ：0 ; 
             左：0 ; 
             下：0 ; 
             右：0 ; 
             幅：50％; 
             高さ：50％; 
             マージン：自動; 
             背景色：赤。
         } 
     </ スタイル> 
</ ヘッド> 
< 身体> 
    < divのクラス= "父" > 
        < divのクラス= "息子" > </ DIV > 
    </ DIV > 
</ ボディ> 

</ HTML >

コードの表示

CSSの幅可変水平高垂直中心div要素

使用マージン：自動垂直センタリング

おすすめ