CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有します。詳細は次のとおりです。

<!doctypehtml>
<html lang="ja">  
  <ヘッド>  
    <メタ文字セット="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-互換"/>  
    <title>CSS 垂直中央</title>  
    <スタイル タイプ="text/css">  
      。容器{  
        width:500px;/*装飾*/
        高さ:500px;  
        背景:#B9D6FF;  
        境界線: 1px 実線 #CCC;  
      }  
       
    </スタイル>  
  </head>  
  <本文>  
    <h1>垂直中央（表）</h1>  
    <div クラス = 'コンテナ'>
        <テーブルの幅="100%" 高さ="100%">
            <tr>
               <td align="center" valign="middle">
                  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
               </td>
           </tr>
       </テーブル> 
   </div>
     
  </本文>  
</html>

さて、CSS の実装を見てみましょう。テーブルでできることはすべて CSS でもできますが、CSS はブラウザごとに大きく異なるため、互換性を保つのは非常に困難です。これには多くの詳細、さまざまなフロー、表示効果、CSS ハックが含まれます。IE は初期の頃に多くのプライベート属性を開発しましたが、これらについてはさらに調査する必要があります。まず最も単純な実装である背景画像メソッドを見てみましょう

背景画像メソッド

<!doctypehtml>
<html>
<ヘッド>
<title>CSS 垂直中央</title>
<スタイル タイプ="text/css">
。容器 {
  幅:500ピクセル;
  高さ:500px;
  行の高さ:500px;
  背景:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) 繰り返しなし 中央 中央;
  境界線:1px実線 #f00;
  テキスト配置: 中央;
}
 
</スタイル>
 
</head>
<本文>
<h1>垂直中央</h1>
<div class="コンテナ">
    
</div>
</本文>
</html>

CSS 表現方法

<html lang="ja">  
  <ヘッド>  
    <メタ文字セット="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-互換"/>  
    <title>Situ Zhengmei CSS 垂直センタリング</title>  
    <スタイル タイプ="text/css">  
      。容器{  
        /*IE8 は標準ブラウザと垂直に並びます*/
        表示: テーブルセル;
        垂直位置揃え:中央; 
        width:500px;/*装飾*/
        高さ:500px;  
        背景:#B9D6FF;  
        境界線: 1px 実線 #CCC;  
      }  
      .コンテナ画像{  
        display:block;/*ボックスモデルにします*/
        マージン:0 自動;  
        テキスト配置:中央;
        margin-top:expression((500 - this.height )/2);/*IE567 が垂直方向に揃うようにする*/
      }  
    </スタイル>  
  </head>  
  <本文>  
    <h1>垂直中央 (CSS 式)</h1>  
    <div class="コンテナ">  
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />  
    </div>  
  </本文>  
</html>

絶対位置決め法

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-互換"/>
    <title>Situ Zhengmei CSS 垂直センタリング</title>
    <スタイル タイプ="text/css">
      div {
       /*IE8 は標準ブラウザと垂直に並びます*/
        表示:テーブルセル;
        垂直位置揃え:中央;
        オーバーフロー:非表示;
        位置:相対;
        テキスト配置:中央;
        width:500px;/*装飾*/
        高さ:500px;
        境界線:1px実線 #ccc;
        背景:#B9D6FF;
      }
      div p {
        +位置:絶対;
        トップ:50%
      }
      画像 {
        +位置:相対;
        上:-50%;
        左:-50%;
      }
  
    </スタイル>
  </head>
  <本文>
    <h1>垂直中央（絶対配置）</h1>
    <div class="コンテナ">
      <p>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      </p>
    </div>
  </本文>
</html>

display:inline-block メソッド

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-互換"/>
    <title>Situ Zhengmei CSS 垂直センタリング</title>
    <スタイル タイプ="text/css">
      div {
        表示:テーブルセル;
        垂直位置揃え:中央;
        テキスト配置:中央;
        幅:500ピクセル;
        高さ:500px;
        背景:#B9D6FF;
        境界線: 1px 実線 #CCC;
      }
 
    </スタイル>
    <!--[IEの場合]>
<スタイル タイプ="text/css">
私 {
    表示:インラインブロック;
    高さ:100%;
    垂直方向の配置:中央
    }
画像 {
    垂直方向の配置:中央
    }
</スタイル>
<![endif]-->
    
  </head>
  <本文>
    <h1>垂直中央揃え（インラインブロック方式）</h1>
    <div class="コンテナ">
      <i></i>
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
    </div>
  </本文>
</html>

書き込みモード

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-互換"/>
    <title>CSS 垂直中央</title>
    <スタイル タイプ="text/css">
      div{
        幅:500ピクセル;
        高さ:500px;
        行の高さ:500px;
        テキスト配置:中央;
        背景:#B9D6FF;
        境界線:1px実線 #f00;
      }
      div スパン{
        高さ:100%\9;
        書き込みモード:tb-rl\9;
      }
      div画像{
        垂直方向の配置:中央
      }
    </スタイル>
  </head>
  <本文>
    <h1>垂直方向の中央揃え（書字方向方式）</h1>
    <div class="コンテナ">
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      </span>
    </div>
  </本文>
</html>