CSS margin: auto의 역할 – 요소를 가로 중앙에 자동 정렬하는 방법

CSS에서 margin 속성값을 auto로 설정하면, 해당 요소가 컨테이너(부모 요소) 안에서 가로 방향으로 자동으로 중앙 정렬됩니다. 브라우저가 남은 좌우 여백을 계산해 양쪽에 균등하게 배분하기 때문입니다.

margin: auto 사용 시 주의할 점

margin: auto가 정상적으로 동작하려면 몇 가지 조건이 필요합니다.

요소에 명시적인 width 값이 지정되어 있어야 합니다. 너비가 지정되지 않은 블록 요소는 기본적으로 부모 영역 전체를 차지하므로, 여백이 남지 않아 중앙 정렬이 일어나지 않습니다.
대상 요소는 블록 레벨 요소여야 합니다.

예제 코드

다음 코드를 실행하면 div 요소가 화면 가운데 정렬되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 200px;
            margin: auto;
            border: 2px dashed blue;
         }
      </style>
   </head>
   <body>
      <p>데모 텍스트입니다</p>
      <div>
         margin: auto; 덕분에 이 요소는 가로 중앙에 정렬됩니다.
      </div>
  </body>
</html>

실행 결과

CSS margin: auto의 역할 – 요소를 가로 중앙에 자동 정렬하는 방법

추가 팁: 세로 중앙 정렬이 필요하다면?

margin: auto는 기본적으로 가로(수평) 정렬에만 효과적입니다. 세로(수직) 중앙 정렬까지 한 번에 처리하고 싶다면 Flexbox를 활용하는 것이 좋습니다.

.container {
  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
}

이처럼 간단한 수평 정렬에는 margin: auto를, 복잡한 레이아웃 정렬에는 Flexbox를 상황에 맞게 선택해 사용하면 됩니다.