CSS 블록 요소 정렬

margin 속성은 여백 설정뿐만 아니라 블록 요소를 가운데 정렬하는 데에도 사용됩니다. 이를 위해 오른쪽 및 왼쪽 여백을 auto 값으로 설정해야 합니다.

아래 예제에서 내부 블록이 가운데 정렬됩니다:

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

css.parent {
  border: 1px solid red;
}

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

Результат:

이 방법으로는 블록 요소만 수평으로 가운데 정렬할 수 있으며, 너비가 지정된 요소에만 적용된다는 점을 명심하세요.

상단과 하단 margin을 다르게 설정해야 하는 경우, 다음과 같이 작성할 수 있습니다:

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

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

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