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

サイト構築 -CSS

Post on:2011年11月2日

sponsorsr

width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。

Centering in the Unknown

[ad#ad-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;
}