cssで縦方向中央に配置する方法（5つのケース＋1）

iPhone 4Sが発売間近。
買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。
Siriに甘い言葉をささやきたい。英語できないけど。

さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。
しかしながら、cssはそういうのちょっと苦手。
「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。

というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。

case1：画像の場合

上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。

サンプル

html

<p class="case01">
<img src="http://dummyimage.com/100x100/000/fff.gif&text=img" alt="img" height="100" width="100" />
</p>

css

.case01 {
position:relative;
}
.case01 img {
position:absolute;
top: 50%;
margin-top: -50px ;
}

case2：テキストが1行の場合

heightとline-heightに同じ値を指定。

サンプル

テキストが1行の場合

html

<p class="case02">テキストが1行の場合</p>

css

.case02 {
height: 50px;
line-height: 50px;
}

case3：複数行かつ行数が決まっている場合

基本的にはcase1と同じです。
テキストの縦サイズの1/2をネガティブマージンで上に上げるのですが、このサイズは（line-height）×（行数）/2で。

サンプル

複数行
かつ
行数が決まっている場合

html

<div class="case03">
<p>複数行<br />
かつ<br />
行数が決まっている場合</p>
</div>

css

.case03 {
position:relative;
}
.case03 p {
position:absolute;
top: 50%;
line-height: 1.8;
margin-top: -2.7em; /*（line-height）×（行数）/2 */
}

case4：画像+テキスト1行

画像に対し、vertical-align: middle;を指定。
（ソースは画像、テキストの順に並べる場合ですが、逆の場合もhtmlの並べ替えのみでOKです。）

サンプル

テキストテキスト

テキストテキスト

html

<div class="case04">
<img src="http://dummyimage.com/100x100/000/fff.gif&text=img" alt="img" height="100" width="100" />テキストテキスト
</div>

css

.case04 img {
vertical-align: middle;
}

case5：画像+テキスト複数行

画像、テキストの両方にdisplay: inline-block;とvertical-align: middle;を指定。
（こちらもソースは画像、テキストの順に並べる場合ですが、逆の場合もhtmlの並べ替えのみでOKです。）

サンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

html

<div class="case05">
<img src="http://dummyimage.com/100x100/000/fff.gif&text=img" alt="img" height="100" width="100" />
<span class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキスト</span>
</div>

css

.case05 img {
display: inline-block;
vertical-align: middle;
*zoom: 1; /* for IE6-7 */
*display: inline; /* for IE6-7 */
}
.case05 .txt {
display: inline-block;
vertical-align: middle;
width:250px; /* 幅の指定がない場合、改行が必要な幅を超えるとカラム落ちします。 */
*zoom: 1; /* for IE6-7 */
*display: inline; /* for IE6-7 */
}

まとめ

さて、これで縦中央揃えなデザインをもらっちゃった時もちょっと安心。
上記でどうしても効かない！という場合、ページ内に既に指定されているスタイルが優先されている可能性もありますので参考まで。

【2011/10/15追記】case6：汎用性あって、複数行かつ行数が定まっていない場合にも使える。

社内から「これも！」と指摘がありました。追記します。
table-cellということで抵抗ある方もいるかもしれませんが、あくまでテーブル的な振る舞いをするだけなので割り切ってしまうが吉かと。

それと、Siriは来年日本語を覚えてくれるらしいので、それまで待つことにします。

サンプル

汎用性あって、
複数行かつ
行数が定まっていない場合にも使える。

html

<p class="case06">
汎用性あって、<br />
複数行かつ<br />
行数が定まっていない場合にも使える。
</p>

css

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