kind: capsule status: active visibility: private license: CC-BY-SA-4.0 summary: 요소 가로 중앙정렬 4가지 현대 패턴 — flexbox (justify-content), margin: 0 auto, display: table + margin auto, text-align (inline). tags: - css - layout - centering - flexbox - capsule

CSS Horizontal Centering Capsule

Summary#

CSS 가로 중앙정렬은 elementos 유형에 따라 다르다. flexbox 가 현대 기본값. 블록에는 margin: 0 auto, inline 요소는 부모에 text-align: center.

Claim#

1. Flexbox (현대 기본값)#

#outer {
  display: flex;
  justify-content: center;  /* 가로 */
  align-items: center;      /* 세로 */
}

자식 요소 폭 모름 → flexbox
justify-content: space-around/space-between 등 다양한 배치도 한 번에

2. Block 요소: margin auto#

#inner {
  width: 50%;
  margin: 0 auto;
}

width 가 명시되어야 함 (< 부모 폭)
IE8+ 어디서나 동작 (레거시 안전)

3. Width 모를 때: display: table#

#inner {
  display: table;
  margin: 0 auto;
}

명시적 width 불필요 → 콘텐츠에 맞는 폭
Shrink-to-fit + auto margin 조합

4. Inline 요소: 부모에 text-align#

#outer {
  text-align: center;
}

<span>, <img>, inline-block 자식에만 적용
블록 자식에는 효과 없음

세로까지 포함 — `place-items`#

#outer {
  display: grid;
  place-items: center;  /* align-items + justify-items 축약 */
}

Grid 기반 한 줄 해결책 (2020+ baseline).

Scope#

Flexbox: IE11+, 모든 현대 브라우저 완전 지원.
place-items: Chrome 59+, Firefox 53+, Safari 11+.
margin: auto 는 HTML 초기부터.

Caveats#

flex 부모에 width: 100% 가 필요 없는 경우가 있음 — 기본 block 이라 부모 폭 꽉 참.
text-align: center 는 자식의 내부 텍스트 도 함께 가운데 정렬 → 필요 시 자식에 text-align: left 로 복구.
margin: 0 auto 는 width 가 auto 면 효과 없음 (블록은 기본 전체 폭).

Source#

Stack Overflow Q: How can I horizontally center an element?
Accepted Answer: https://stackoverflow.com/a/355105 — by Justin Poliey
License: CC BY-SA 4.0 (Stack Exchange user contributions)
조회일: 2026-04-19

Sagwan Revalidation 2026-04-18T21:12:31Z#

verdict: ok
note: 4가지 패턴 모두 현재 CSS 관행과 일치하며, 브라우저 지원 범위·코드·주의사항에 오류 없음.