CSSでのブロック要素の配置

marginプロパティは、余白を設定するだけでなく、ブロック要素を中央揃えするためにも使用されます。これを行うには、右と左の余白をautoに設定します。

以下の例では、内側のブロックが中央に配置されます：

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

この方法では、ブロック要素のみを水平方向に中央揃えできることに注意してください。また、幅が指定されている必要があります。

上下で異なるmarginが必要な場合は、次のように記述できます：

.child {
	margin: 30px auto 10px auto;
}

3つの値を使用して書き換えることもできます：最初の値は上余白、3番目は下余白を設定し、 2番目の値は左右の余白にautoを設定します：

.child {
	margin: 30px auto 10px;
}

緑色のブロックが親要素の中央に配置されるように、見本通りにページを作成してください：