スタイルシートのみで上下中央配置

実装方法は3通り

以下のような事例を想定します。 白いテキストボックスが上下中央配置されています。

上下中央配置といえば、display:table-cellであったり、line-heightでの実装であったり、JavaScriptを用いたりと、何パターンが実装方法が存在しますが、IE7に対応していなかったり、改行に対応できなかったりと一長一短です。

そこで今回は、CSSのみで、なおかつIE7から対応できる方法を紹介します。

inline-blockの縦位置中央揃えを利用する

【注意】親要素の高さが決まっている場合のみ対応可能です

inline-blockを複数並べた際、vertical-alignで縦方向の位置を調整できることを利用します。

つまり、inline-blockの中に、親要素の高さと同じものを混ぜて、縦中央配置にすればよいのです。 具体的なソースは次のとおり。

<div class="wrapper">
    <span class="ghost-center"></span>
    <p> Lorem ipsum ... </p>
</div>

上記のソースにおいてp要素を、div要素の上下中央に配置します。

ポイントは空のspan要素を用意して全体の高さを取得させることと、子要素（span要素とp要素)をinline-blockにすることです。

display:inlineとzoom:1を併用すればIE7より対応可能です。

下図のようなイメージです。

実際はghost-centerの幅は0pxです。

.wrapper{
    display: block;
    width: 300px;
    height: 300px;
    background: #ccc; 
    text-align: center;
}
  .wrapper .ghost-center,
  .wrapper p{
      display: inline-block;
      vertical-align: middle;
      /display: inline;
      /zoom: 1;
  }
  .wrapper .ghost-center {
      width: 0px;
      height: 100%;  
  }

絶対配置を利用する

【注意】親要素の幅・高さ / 子要素の幅・高さが決まっている場合のみ対応可能です

あまり知られていませんが、絶対配置にした要素の上下左右すべての座標を0を指定すると親要素いっぱいに広がるという性質があります。

これを利用して、子要素の幅・高さを決め打ちし、marginを成り行きにすることで中央に配置することが可能になります。

具体的なソースは次のとおり。

<div class="wrapper">   
    <p> Lorem ipsum ... </p>
</div>

.wrapper{
    position: relative;
}
  .wrapper p{
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width: 150px;
     height: 100px;
     margin: auto;
  }

ポイントは先述したとおり、幅/高さを決め打ちする点と、marginをautoにする点です。

ちなみに任意の方向のmarginを0にすれば右寄せ・左寄せ・上寄せ・下寄せも実装可能です。

相対配置とtransformを利用する

これはCSS3に対応している場合限定ですが、親要素や子要素のサイズが可変でも対応できる方法です。

<div class="wrapper">
    <p> Lorem ipsum ... </p>
</div>

.wrapper{
}
   .wrapper p{
      position: relative;
      top: 50%;
      transform: translateY(-50%);
   }

絶対配置にした子要素に、子要素自身の半分の高さのマイナスマージンを指定する方法と似ています。