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

一、行高(line-height)法
垂直方向に1行または複数の文字だけを中心とする場合は、文字の行の高さとコンテナの高さを同じにするだけで最も簡単です.たとえば、次のようにします.

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

このコードは、段落内でテキストを垂直に中央に配置する効果を達成します.
二、内側マージン法
もう1つの方法は、行の高さ法と似ています.1行または数行の文字を垂直に中央に配置するのに適しています.paddingを使用してコンテンツを垂直に中央に配置する原理です.たとえば、次のようにします.

p { padding:20px 0; }

このコードの効果はline-height法とあまり差がありません.
三、アナログ表法
コンテナをdisplay:tableに設定し、サブエレメント、すなわち垂直に中央に表示するエレメントをdisplay:table-cellに設定し、vertical-align:middleを加えて実現します.
残念ながらIE 7以下はサポートされていません.html構造は以下の通りです.

<div id="wrapper">
    <div id="cell">
        <p>                </p>
        <p>                </p>
    </div>
</div>

style{
.wrapper{
    width: 300px;height: 300px;
    background-color: #000;
    margin: 0 auto;
    color: red;
}

.cell{display:table-cell; 
vertical-align:middle;
}
}

四、CSS 3のtransformで実現

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

五:css 3のbox方法は水平垂直中央を実現する

<div class="center">
  <div class="text">
    <p>      </p>
    <p>      </p>
    <p>      </p>
  </div>
</div>
style{
.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;
}
}