【CSS】ボックスの上下左右の中央にテキストなどの要素を配置する方法（table-cell）

例えば、ウェブサイトを作成していて、メインビジュアルなどの上下左右のちょうど中央にテキストや画像などの要素を置きたい時って、以前までの CSS2 であれば、position:absolute あたりで指定なければなりませんでした。

こういう感じのヤツ

しかし、CSS3 では「table-cell」というとてもありがた～いものがございまして、以前に比べて簡単に、ボックス内での要素の上下左右の中央表示ができるようになりました。

今回は「CSS の table-cell を使って簡単にボックス内要素の上下左右中央表示を行う手順」を実際に作ったサンプルと一緒に紹介します。

CSS の 値「table-cell」とは？ ざっくり解説

table-cell とは、CSS の display に使う「値」で、この値を設定した HTML 要素を擬似的にテーブル扱いにすることができる、段組みレイアウト用の値です。

利用する時には親要素に対して「display:table」を指定して、内包される子要素に対して「display:table-cell」を使います。

ぼくの感覚だと table-cell は、やたらめったらと使うものではなく、HTML の table タグを使うべきところではちゃんとそれを使い、table タグが使えない部分や工夫が必要な部分などで使うと良いと思います。

今まで position:absolute でやっていたボックス中央表示

今までは「position:absolute」十分でしたが、ウェブサイトもレスポンシブサイトな時代となってしまい、「position:absolute」だとモバイル表示されたときの型崩れ感がひどい。

モバイル表示されたときのメインビジュアルは縮尺されるのに、テキストなどの要素位置はアブソリュートしちゃってますから・・・そりゃ崩れますわね。

しかし、「table-cell」を利用してボックスの中央表示にすれば、上下左右の中央位置は絶対に中央固定のままで縮尺してモバイル表示させることが可能なのです。

table-cell を使ってボックス内の中央へ要素を表示させる

まずはデモページを確認してください

まずは table-cell を使ってボックス内に上下左右中央表示したらどんな感じなのかデモを確認してみてください。

デモの下ボックスの背景は「background」で指定、更に背景画像はレスポンシブするように「background-size:cover」指定です。

では、デモページのようにボックス内に要素が上下左右中央表示にできる手順です。

table-cell の使い方

CSS

HTML

ボックスのレイアウトは端折っていますがこんな感じです。

必ず「親要素（ボックス）に display:table を指定します」これを忘れると、内包された子要素にいくら table-cell を指定しても意味はありません。

そして、table-cell で擬似的にテーブル化したので、上下を中央表示にするために、「vertical-align:middle」を普通の table と同じように指定します（忘れずに）。

デモは上側がこれに近い感じで、下側は応用している感じです。

デモの CSS と HTML をそのまま掲載

参考までにデモで使われているコードをそのまま掲載しておきます。

CSS

HTML

あとがき

table-cell はうまく使えばコーディングの手間をそこそこ省けます。

先にもいいましたが、なんでもかんでも table-cell という乱用は禁物ですが、大変便利ですからまだ使ったことが無い方はぜひぜひ試しに使ってみてくださいね！