CSSで要素の上下（垂直）中央揃え

要素を上下（垂直）中央の揃えるには、以下の方法があります。

基本となるHTML

<div class="outer-element"> <div class="inner-element"> <p>Sample</p> </div> </div> div.outer-element { height:100px; }

• ※ サンプルではわかりやすくするため親要素（div.outer-element）の高さを固定しています。

対応方法

• positionを使用するパターン
• table-cellを使用するパターン
• position + transform:translateを使用するパターン
• position + ネガティブmarginを使用するパターン
• flexを使用するパターン

positionを使用するパターン

• ※ IE7以下には対応しない
• ※ 中央揃えにする要素の高さも固定にする必要がある

div.outer-element { position:relative; } div.outer-element .inner-element { margin-top:auto; margin-bottom:auto; position:absolute; top:0; bottom:0; height:2em; }

topプロパティとbottomプロパティの値をauto以外の指定にすると、margin-topプロパティとmargin-bottomプロパティの値でautoが有効になります。

table-cellを使用するパターン

• ※ IE7以下には対応しない

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

position + transform:translateを使用するパターン

• ※ IE8以下には対応しない

div.outer-element { position:relative; } div.outer-element .inner-element { -webkit-transform:translate(0, -50%); -moz-transform:translate(0, -50%); -ms-transform:translate(0, -50%); -o-transform:translate(0, -50%); transform:translate(0, -50%); position:absolute; top:50%; }

topプロパティで親要素の半分の位置まで移動させ、子要素の高さの半分をtransformプロパティのtranslate関数で子要素を上に移動させます。

position + ネガティブmarginを使用するパターン

• ※ 中央揃えにする要素の高さを固定にする必要がある

div.outer-element { position:relative; } div.outer-element .inner-element { margin-top:-1em; position:absolute; top:50%; height:2em; }

topプロパティで親要素の半分の位置まで移動させ、子要素の高さの半分をmarginプロパティで子要素を上に移動させます。

フレキシブル・レイアウトを使用するパターン

• ※ フレキシブルレイアウトの対応ブラウザは以下のページを参照ください。
  フレキシブル・レイアウトの基本

div.outer-element { display:-webkit-box; display:-moz-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-align:center; -moz-box-align:center; -webkit-align-items:center; -moz-align-items:center; align-items:center; }

なお、フレキシブルレイアウトを使用した状態での文字のみの高さ揃えであれば、疑似要素を使用した以下の方法も可能です。

div.outer-element { display:-webkit-box; display:-moz-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; } div.outer-element div.inner-element::before { display:inline-block; width:0; height:100%; content:""; vertical-align:middle; } div.outer-element div.inner-element p { display:inline; }