노트

CSS 가운데 정렬

Centering in CSS

프런트엔드#css · 연결된 개념 3개

쉽게 말하면

CSS 가운데 정렬은 요소를 부모 안 한가운데 놓는 일이에요. 부모에 flex나 grid를 걸어 정렬을 맡기거나, margin auto로 남는 공간을 양쪽에 똑같이 나눠 주는 식으로 상황에 맞게 골라요.

비유가 깨지는 곳 방법마다 조건이 있어요. margin-inline: auto는 너비가 정해져야 효과가 있어서 fit-content와 같이 쓰고, grid에선 place-content와 place-items가 가운데 두는 대상이 서로 달라요.

요소를 부모 안에서 가로·세로 가운데에 놓는 방법은 여러 가지이고, 상황(레이아웃 방식, 크기를 아는지)에 따라 고른다.

/* 1. Flexbox: 가장 무난 */
.parent { display: flex; justify-content: center; align-items: center; }
 
/* 2. Grid: 한 줄 */
.parent { display: grid; place-content: center; }
 
/* 3. 가로만, 블록 요소 */
.child { max-width: fit-content; margin-inline: auto; }
 
/* 4. 겹쳐 띄우기(모달, 배너) */
.child { position: fixed; inset: 0; margin: auto; width: 12rem; height: fit-content; }
  • Flexbox: 컨테이너에 정렬을 주거나, 아이템에 margin: auto를 줘도 된다
  • CSS Grid: place-content는 align-content와 justify-content의 단축이다. 아이템 자체를 칸 안에서 가운데 두려면 place-items: center를 쓴다
  • margin-inline: auto: margin-left/right: auto의 논리 속성(Logical Property) 버전이다. 너비가 정해져 있어야 효과가 있어서, 콘텐츠 너비에 맞추려면 fit-content와 함께 쓴다
  • inset: 0 + margin: auto: 네 변을 모두 0에 붙이고 크기를 제한하면 남는 공간을 margin이 나눠 가진다 → inset 속성. bottom만 띄우고 좌우를 0으로 두면 화면 아래 가운데에 붙는 쿠키 배너가 된다

출처: Josh W. Comeau — How To Center a Div

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • CSS 박스 모델

    브라우저는 모든 요소를 사각형 상자로 보고, 그 상자를 안쪽부터 콘텐츠(content) → 안쪽 여백(padding) → 테두리(border) → 바깥 여백(margin) 네 겹으로 계산한다. 레이아웃에서 요소가 차지하는 크기와 요소 사이 간격이 모두 이 네 겹에서 나온다.

  • CSS 명시도

    캐스케이드에서 레이어까지 비겼을 때, 선택자가 요소를 얼마나 구체적으로 가리키는지로 승부를 내는 점수. (A, B, C) 세 자리로 매기고 앞자리부터 비교한다.

  • Flexbox와 Grid 비교

    flexbox는 한 방향으로 흐르는 1차원 배치, css-grid는 행과 열을 함께 다루는 2차원 배치다. 크기를 누가 정하느냐도 다르다. flex는 아이템과 콘텐츠가, grid는 컨테이너의 트랙이 정한다.

  • 쌓임 순서와 z-index

    요소가 겹칠 때 무엇이 위에 보일지 정하는 규칙. z-index가 없을 때도 정해진 기본 순서가 있고, z-index는 같은 쌓임 맥락(Stacking Context) 안에서만 비교된다.

  • 비율을 유지하는 박스

    너비가 바뀌어도 가로세로 비율(예: 16:9)을 지키는 상자. 지금은 aspect-ratio 속성 한 줄이면 되고, 그 전에는 퍼센트 padding을 이용한 트릭을 썼다. 임베드 동영상(iframe)을 반응형으로 만들 때 주로 쓴다.

보기 옵션