CSSで要素の上下(垂直)中央揃え

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

基本となるHTML

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

対応方法

positionを使用するパターン

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

Sample

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

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

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

Sample

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

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

Sample

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

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

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

Sample

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

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

Sample

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

Sample