div_html/css_WEB-ITnose でコンテンツを垂直方向の中央揃えにする 5 つの方法

1. 行の高さの方法

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

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

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

2. パディング方法

別の方法は、行の高さの方法に非常に似ており、次のようなテキストの垂直方向の中央揃えに使用することもできます。

すごい

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

3. テーブルメソッドのシミュレート

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

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

p { padding:20px 0; }

CSS コード:

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

実装は図に示すとおりです:

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

4. 実装する CSS3 変換

css コードは次のとおりです:

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

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

html コード:

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

cs S コード:

rreee

結果は次のとおりです:

著者: 嵐の後の虹を見てください

出典: http://www.cnblogs.com/moqiutao/

この記事がそう感じたらあなたの勉強に役立ちますので、サポートと励ましをお願いします。