div 内のコンテンツを垂直方向の中央に配置する 5 つの方法

1. 行の高さの方法

垂直方向の中央に配置する行が 1 行または数単語だけの場合は、テキストの行の高さをテキストの高さと同じにするのが最も簡単です。コンテナー、例:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

このコードは、段落内でテキストを垂直方向に中央揃えにする効果を実現できます。

2. パディング方法

別の方法は、行の高さの方法に非常に似ており、次のような 1 行または複数行のテキストを垂直方向に中央揃えするのに適しています。

p { padding:20px 0; }

このコードの効果は line-height メソッドと似ています。

3. テーブルメソッドをシミュレートします

コンテナをdisplay:tableに設定し、子要素、つまり中央に縦方向に表示される要素をdisplay:table-cellに設定し、vertical-alignを追加します。それを達成するための中間。

htmlの構造は次のとおりです:

<p id="wrapper">
    <p id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </p></p>

cssコード:

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}

残念ながらIE7以下はサポートされていません。

4番目、

cssコードを実装するためのCSS3変換は次のとおりです:

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5: 水平方向と垂直方向のセンタリングを実現するCSS3ボックスメソッド

htmlコード:

<p class="center">
  <p class="text">
    <p>我是多行文字</p>
    <p>我是多行文字</p>
    <p>我是多行文字</p>
  </p></p>

cssコード:

.center {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background:#000;
  color:#fff;
  margin: 20px auto;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

以上がdiv 内のコンテンツを垂直方向の中央に配置する 5 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。