CSS 3のボックスレイアウトでコンテンツを画面の中央に配置する

　コンテンツをブラウザ画面の中央に配置するレイアウトは、現状のCSSでは実現が難しい。CSSでは横方向の配置を指定することはできても、縦方向の配置を指定するのが困難だからだ。どうしても画面の中央に配置する場合には、positionプロパティとマイナスマージンの機能を駆使することになるが、コンテンツの横幅と高さを固定する必要があるなど使い勝手が悪い。

　そこで、今回はCSS3で提案されているボックスレイアウトを利用して、コンテンツを画面の中央に配置する方法を紹介する。ボックスレイアウトには縦方向と横方向の配置を指定するプロパティが用意されているので、中央に配置するレイアウトを簡単に作成することが可能だ。

　なお、ボックスレイアウトについて詳しくは、前回までの記事を参照してほしい。ブラウザはFirefoxとSafari、Google Chromeが対応している。

• CSS 3における新しいレイアウト手法：ボックスレイアウト
• ボックスレイアウトで簡単リキッドレイアウト
• ボックスレイアウトの方向をコントロールする

ボックスレイアウトでコンテンツを画面の中央に配置するには

　まずは、ボックスレイアウトを利用してコンテンツを画面の中央に配置したサンプルを見てほしい。

　次のサンプルでは水色の枠線で囲んだコンテンツを画面の中央に配置している。ブラウザ画面の大きさを変えても、コンテンツの上下左右には均等に余白が挿入され、常に画面の中央に配置されることがわかる。

コンテンツを画面の中央に配置したもの

ブラウザ画面の大きさを変更しても中央に配置される

html, body	{
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	}

body	{
	display: -moz-box;
	display: -webkit-box;
	-moz-box-align: center;
	-webkit-box-align: center;
	-moz-box-pack: center;
	-webkit-box-pack: center;
	}

div	{
	border: solid 4px skyblue;
	width: 350px;
	}

<div>
<h1>PHOTO</h1>
<p><img src="photo.jpg" alt="PHOTO" /></p>
</div>

※ブラウザで表示を確認する

　今回はbox-alignとbox-packプロパティを利用して、次のような手順でコンテンツを画面の中央に配置する。