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

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

サイトのキャプチャ

Centering in the Unknown

下記は各ポイントを意訳したものです。

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

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

実装のイメージ

「真ん中に配置するエレメント」を「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化は人によっては目からウロコかもしれませんが、ここではこの方法は使わずに、エレメントを真ん中に配置する方法を紹介しましょう。

仕組みは「親エレメント」の中に高さ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;
}

まとめと対応ブラウザ

この擬似要素を使ったテクニックの考え方は、tableを使ったものと同じです。
対応ブラウザは擬似要素を使っているため、IE8+です。

IE7では擬似要素のサポートもCSSのtable化もサポートしていません。もし、IE7以下の対応が必要であれば、ゴーストとなるエレメントに「空のspan要素」を使用します。しかし、これは新しいアプローチではありません。「空のspan要素」を使ったテクニックは5年前に公開されています。

top of page

©2017 coliss