上下中央配置に悩める初心者コーダーにおくる４つの解決法

【パターン１】インライン要素を上下中央に配置したい

• 対象要素：imgやspanなどのインライン要素やtable-cell
• 使い方：適用させたい要素にそのまま記述
• 注意点：divやp等のブロックレベル要素には効かない

html

	<div>
	
	こねこ盛り
	</div>

css

img {
	vertical-align:middle;
}

例

こねこ盛り

【パターン２】親要素の高さを揃え、子要素を上下中央に配置したい

• 対象要素：インライン要素、ブロック要素
• 使い方：親要素にdisplay: table;を指定、対象要素にdisplay: table-cellを適用
• 注意点：高さ指定が必ず必要、IE8以上対応（IE6,7未対応）

html

	<div>
	<p>BOX1</p>
	<p>BOX2</p>
	<p>BOX3</p>
	</div>

css

div {
	display:table;
}
p {
	display:table-cell;
	vertical-align:middle;
	height:200px;
}

例

IE7に対応させるには

css（IE7ハック）

/*for IE7 */
	*:first-child+html p {
	display: inline;
	zoom: 1;
}

【パターン３】幅や高さの異なる要素を上下左右中央に配置したい

• 対象要素：インライン要素、ブロック要素
• 使い方：親要素にposition: absolute;もしくはposition: relative;を、適用させたい要素そのものにposition:absolute;を記述し、top,right,bottom,leftに0を指定
• 注意点：IE8以上対応（IE6,7未対応）

html

	<div>
	
	</div>

css

div {
	position:relative;
	background:#C4F8FF;
}
img {
	margin:auto;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

例

 親要素

【パターン４】高さ指定をせずに上下中央に配置したい

• 対象要素：インライン要素、ブロック要素
• 使い方：positionとtransformで位置調整
• 注意点：IE9以上対応（IE6,7,8未対応）、ベンダープレフィックスの付与が必要

html

	<div>
	<p></p>
	</div>

css

div {
	display:table;
}
p {
	position:relative;
	top:50%; /* topから50%の位置に配置 */
	transform: translateY(-50%); /* 要素自体の高さの50%を上方向へ移動 */
}

さらに、スマホ対応でベンダープレフィックスを付与すると以下の記述になります。

p {
	position:relative;
	top:50%; /* topから50%の位置に配置 */
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%); /* 要素自体の高さの50%を上方向へ移動 */
}

例

［補足］レイアウトイメージ

まず、子要素を親要素のtopから親要素の50%分下へ移動させます。
さらに子要素自身の高さ50%分をtransformで上に移動させると、上下中央に配置されます。

このように同じレイアウトでもいくつかの方法があり、状況に応じて適用させるべきcssがだんだんとわかってきます。
慣れてきたらこのようにいくつかのレイアウトパターンを洗い出し、Dreamweaver等にある（※）スニペット機能を活用してストックしていくと作業効率もUPしておすすめです！
（※）スニペット機能…よく使うコードをすぐ使えるように保存できる機能