[CSS]サイズが分からない要素を真ん中に配置するテクニック

Post on:2011年11月2日

要素のサイズが分かっている場合

「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。

「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。

CSS

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

これは簡単なテクニックです。

要素のサイズが分からない場合

「真ん中に配置するエレメント」と「その親エレメント」のサイズが分からない場合はどうしたらよいでしょうか。

乱暴な方法ですが、tableを使うことで実現することは可能です。

HTML

<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

しかし、レイアウトのためにtableを使う方法はセマンティックではありません。
「真ん中に配置するエレメント」と「その親エレメント」をdiv要素で実装してみます。

HTML

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

div要素で実装しても、tableで実装したような結果を得ることができます。

CSS

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

CSSでのtable化は人によっては目からウロコかもしれませんが、ここではこの方法は使わずに、エレメントを真ん中に配置する方法を紹介しましょう。

[ad#ad-2]

仕組みは「親エレメント」の中に高さ100%のゴーストエレメントを準備し、それに対して「vertical-align: middle;」で真ん中に配置します。

ゴーストとなるエレメントは実体が必要ないので、擬似要素で実装します。

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}