front-end development

main을 화면 중앙에 배치하려면? margin: auto vs text-align: center

지식루프 2025. 9. 13. 18:44
728x90
반응형

웹에서 가운데 정렬을 할 때, 초보자가 가장 많이 헷갈리는 부분이 바로
margin: auto와 text-align: center의 차이입니다.

1. margin: auto의 원리 – 블록 요소를 가운데 정렬

main {
  width: 700px;
  margin: 32px auto;
}

 

  • main 같은 블록 요소는 기본적으로 왼쪽부터 쌓임.
  • 그런데 width를 주면 요소가 화면 전체를 차지하지 않고 남는 공간이 생김.
  • margin-left: auto; margin-right: auto;는 남는 공간을 좌우로 균등하게 분배해서, 블록 요소 자체가 화면 가운데로 이동함.

👉 즉, 블록 요소 자체를 정렬하는 방법이에요.

2. text-align: center의 원리 – 내부 텍스트/인라인 요소 정렬

main {
  text-align: center;
}

 

  • text-align은 부모 박스 안에서 인라인 요소(텍스트, span, img 등)의 정렬 방식을 결정.
  • 따라서 블록 요소(main, div, section 등)를 가운데로 옮기지 않음.
  • 대신, 그 안의 글자나 인라인 요소들만 가운데로 정렬됨.

👉 즉, 자식 인라인 요소를 정렬하는 방법이에요.

 

3. 두 가지 비교 정리

 

구분  margin: auto  text-align: center
적용 대상 블록 요소 인라인 요소 (텍스트, span, img)
필요 조건 width 값 지정 필요 display: inline, inline-block, 또는 텍스트
효과 요소 박스 자체를 가운데 정렬 박스 안의 텍스트/인라인 요소만 가운데 정렬
예시 main, div, section span, a, 텍스트, img

 

4. 왜 text-align: center로는 안되나?

main 같은 블록 요소는 부모 컨테이너(예: <body>) 안에서 이미 독립적인 박스로 자리 잡아요.
이 블록 요소 자체를 옮기려면 margin 같은 레이아웃 속성이 필요하지,
text-align은 내부 자식에만 적용되기 때문에 먹히지 않는 거예요.

 

5. 실제 코드 비교

<main>
  가운데 정렬된 텍스트
</main>

 

/* 방법 1: main 자체를 가운데 */
main {
  width: 700px;
  margin: 0 auto;  /* 블록 요소 자체가 중앙 */
}

/* 방법 2: main 안의 텍스트만 가운데 */
main {
  text-align: center; /* 내부 글자만 중앙 */
}

 

✅ 한 줄 요약

  • 박스 자체를 가운데로: margin: auto
  • 박스 안의 글자를 가운데로: text-align: center

블로그 글이라면 여기서 마지막에 “헷갈리지 않게 기억하는 법” 같은 포인트 넣으면 좋아요.
예:
👉 "margin은 박스 자체, text-align은 박스 안의 글자"

 

 

 

 

 

728x90
반응형