行数や高さが決まっていないブロック要素を縦方向に中央揃えするCSS

July 31, 2013

要素を縦方向に中央揃えさせる方法はたくさんあるのですが、IE7以下にも対応させるとなると、現時点ではかなり面倒な作業となります。方法をいくつかご紹介します。

テキスト1行の場合ーline-heightを使う

親要素の高さと同じline-heightを設定することで縦方向真ん中に配置することができる。

行数2行のテキストの場合ーネガティブマージンを使う

positon:absoluteに設定し、topを50%、top-margin:-1em;に設定。

などなど、他にも状況に応じて様々な設定方法が考えられます。

特に、block要素を縦方向中央揃えの場合は、display:table-cell;にする事で、vartical-allign:middle;を効かせることができる様になります。この場合IE7以下はcss hackを使う必要がある。

検索のヒント

RELATED POSTS