テキストをボックスの上下左右の中央に配置する CSS が超便利

ウェブサイトを制作していて、メインビジュアルやリンクボックス、ナビゲーションなどで指定したボックスに対して上下左右の中央にテキストを配置したいことって結構な頻度であります。

ちょっと前までの CSS 2 ではかなり苦労していたテキストの上下左右の中央配置ですが、CSS 3 からは「display:table;」を使うだけで簡単にできます。

今回はその使い方などをメモします。

ボックス上下左右の中央にテキストを配置
親ボックスと要素だけのパターン
複数の要素をボックス上下左右の中央へ配置したい
デモページを用意しました

ボックス上下左右の中央にテキストを配置

例えばメインビジュアルにこんな感じで上下左右の中央にテキストを配置することって結構多いですよね。

やり方はとても簡単！！

親ボックスと要素だけのパターン

サンプル CSS

.box {
	width: 500px;
	height: 280px;
	display: table;
}

p {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.box {

width: 500px;

height: 280px;

display: table;

}

p {

text-align: center;

display: table-cell;

vertical-align: middle;

}

サンプル HTML

<div class="box">
  <p>ボックスの上下左右の中央にテキストを配置する。要素単体に table-cell を指定</p>
</div>

<p>ボックスの上下左右の中央にテキストを配置する。要素単体に table-cell を指定</p>

</div>

はい、これだけでボックス上下左右の中央にテキストが配置されます。

ポイントは、「.box」に「display:table;」を入れて、ボックスをまずテーブル化させます。その後、要素「p」に「table-cell」を入れて、p をセル化します。

要素をセル化させることによって「vertical-align」が反映されるようになるので、縦軸を中央配置させる値「middle」を入れてあげれば、上下左右の中央へ配置されるわけです。

超簡単ですよねっ！

複数の要素をボックス上下左右の中央へ配置したい

この画像では1段目に h2 で、2段めに p とふたつの要素が上下左右の中央に配置されています。更に画像も同じ様に配置させたい場合もありますよね。

サンプル CSS

.box {
	width: 100%;
	display: table;
}

.item {
	width: 100%;
	height: 400px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

h2 {}
p {}

.box {

width: 100%;

display: table;

}

.item {

width: 100%;

height: 400px;

text-align: center;

display: table-cell;

vertical-align: middle;

}

h2 {}

p {}

サンプル HTML

<div class="box">
  <div class="item">
    <h2>ボックスに複数の要素を入れるパターン</h2>
    <p>ボックスに table-cell を指定すれば複数要素にまとめて対応</p>
  </div>
</div>

<h2>ボックスに複数の要素を入れるパターン</h2>

<p>ボックスに table-cell を指定すれば複数要素にまとめて対応</p>

</div>

と、親ボックスには当然「display:table;」ですが、次は子ボックスに対して「table-cell」でセル化されます。セル化した子ボックス内の要素は当然セル化の効能を引き継いでいるわけなので、複数要素で「vertical-align: middle;」が反映されるわけです。

いやマジこれ便利ですよ。うん。

デモページを用意しました

別ページにてデモを用意したので利用する際の参考になれば幸いです。

デモページをみる