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;
}

세 가지 값으로 다시 작성할 수도 있습니다: 첫 번째 값은 상단 여백, 세 번째 값은 하단 여백을 설정하고, 두 번째 값은 오른쪽 및 왼쪽 여백에 auto 값을 할당합니다:

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

주어진 예시에 따라 페이지를 재현하고, 녹색 블록들이 각각의 부모 요소 가운데에 위치하도록 만드세요: