# CSS에서 div를 중앙 정렬하는 방법

> Clean Markdown view of GeekNews topic #13361. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13361](https://news.hada.io/topic?id=13361)
- GeekNews Markdown: [https://news.hada.io/topic/13361.md](https://news.hada.io/topic/13361.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-02-14T16:35:11+09:00
- Updated: 2024-02-14T16:35:11+09:00
- Original source: [joshwcomeau.com](https://www.joshwcomeau.com/css/center-a-div/)
- Points: 5
- Comments: 3

## Topic Body

### 요소 중앙 정렬 방법

- 요소를 부모 요소 내에서 중앙에 배치하는 것은 오랫동안 까다로운 문제였음.
- CSS가 발전하면서 다양한 해결책이 제공되었으며, 현재는 선택의 폭이 넓어짐.
- 이 튜토리얼은 다양한 접근 방식 간의 트레이드오프를 이해하고, 모든 시나리오에서 중앙 정렬을 처리할 수 있는 전략을 제공함.

### 자동 마진을 이용한 중앙 정렬

- 가로 방향으로 요소를 중앙에 배치하고자 할 때, `auto` 값을 가진 마진을 사용할 수 있음.
- 요소의 너비를 제한해야 하며, `fit-content`는 요소가 내용물에 맞게 크기를 조정함.
- `margin-inline` 속성을 사용하면 `margin-left`와 `margin-right`를 동시에 `auto`로 설정할 수 있음.

### Flexbox를 이용한 중앙 정렬

- Flexbox는 주 축을 따라 아이템 그룹을 배분하는 데 많은 제어를 제공함.
- 단일 요소를 수평 및 수직으로 중앙에 배치할 수 있으며, 자식 요소가 컨테이너에 맞지 않을 때에도 중앙 정렬이 유지됨.
- `flex-direction` 속성을 사용하여 여러 자식 요소의 스택 방향을 제어할 수 있음.

### 뷰포트 내에서 중앙 정렬

- 요소를 부모 컨테이너가 아닌 뷰포트 내에서 중앙에 배치해야 하는 경우가 있음.
- `position: fixed`와 `inset: 0px`를 사용하여 요소를 뷰포트에 고정하고, `margin: auto`를 사용하여 수평 및 수직으로 중앙에 배치할 수 있음.

### 알 수 없는 크기의 요소 중앙 정렬

- 요소의 크기를 명시적으로 알 수 없을 때, `fit-content`를 사용하여 내용물에 맞게 요소를 축소할 수 있음.

### CSS Grid를 이용한 중앙 정렬

- CSS Grid를 사용하여 수평 및 수직으로 요소를 중앙에 배치하는 가장 간결한 방법은 `place-content: center` 속성을 사용하는 것임.

### Flexbox와의 차이점

- CSS Grid는 다른 레이아웃 알고리즘을 사용하며, 때때로 추가 복잡성이 문제가 될 수 있음.
- Flexbox는 부모 요소를 기준으로 백분율을 계산하는 반면, CSS Grid는 그리드 셀을 기준으로 계산함.

### 요소 스택 중앙 정렬

- CSS Grid를 사용하여 여러 요소를 동일한 셀에 할당할 수 있으며, 이는 요소들이 뒤에서 앞으로 쌓이게 함.

### 텍스트 중앙 정렬

- 텍스트는 CSS에서 특별한 취급을 받으며, `text-align` 속성을 사용하여 텍스트를 중앙에 배치할 수 있음.

### 미래의 중앙 정렬

- `align-content` 속성이 Flow 레이아웃에서도 구현되고 있으며, 이는 블록 방향의 콘텐츠 정렬을 제어함.

### 패턴을 넘어서

- CSS를 깊이 이해하면, 기억에 의존하는 대신 직관을 사용하여 문제를 해결할 수 있음.

### 어떤 방법을 사용할지 결정하기

- 단일 요소를 수평으로 중앙에 배치하고 싶을 때는 Flow 레이아웃의 자동 마진 전략을 사용할 수 있음.
- 모달이나 배너와 같은 부유하는 UI를 중앙에 배치하려면, Positioned 레이아웃과 자동 마진을 사용할 수 있음.
- 요소 스택을 중앙에 배치하려면 CSS Grid를 사용할 수 있음.
- 텍스트를 중앙에 배치하려면 `text-align`을 사용할 수 있으며, 이는 다른 방법과 함께 사용될 수 있음.
- 대부분의 다른 상황에서는 Flexbox를 사용할 수 있음. 이는 가장 다재다능한 방법으로, 하나 또는 여러 자식을 수평/수직으로 중앙에 배치할 수 있음.

##### GN⁺의 의견

- 이 글에서 가장 중요한 것은 다양한 CSS 중앙 정렬 방법에 대한 이해를 돕는 것임.
- CSS의 발전으로 인해 이전에는 복잡했던 중앙 정렬 작업이 훨씬 간단해졌으며, 이는 웹 개발자들에게 큰 도움이 됨.
- Flexbox와 CSS Grid와 같은 현대적인 CSS 기술을 이해하고 활용하는 것은 웹 디자인과 레이아웃에 있어서 필수적인 기술이 되었음.

## Comments



### Comment 23078

- Author: v08zbv8fvlkjasdflkj
- Created: 2024-02-15T13:58:11+09:00
- Points: 1

그러고보니 GeekNews도 아티클이 중앙정렬안된게 갑자기 거슬리네요 ㅠ ㅋㅋ

### Comment 23059

- Author: joyfui
- Created: 2024-02-14T17:25:35+09:00
- Points: 1

place-items: center; 애용 중인데 여러 방법이 더 있군요.

### Comment 23058

- Author: neo
- Created: 2024-02-14T16:35:11+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=39360856) 
- 첫 번째 댓글 요약:
  - CSS로 요소를 중앙에 배치하는 것이 어려운 이유에 대한 다양한 의견이 있음.
  - 대부분의 사람들이 중앙 배치가 어려운 이유를 물을 때, 단순히 한 요소를 다른 요소의 정중앙에 배치하는 방법을 묻는 것임.
  - 과거 HTML에서는 `<table>` 태그를 사용하여 쉽게 중앙 배치를 할 수 있었으나, CSS에서는 이것이 어렵게 느껴짐.
  - CSS가 더 나은 도구라고 하면서도 기본적인 중앙 배치조차 쉽게 할 수 없었던 점이 실망스러움.
  - 이러한 이유로 오랫동안 테이블 레이아웃을 사용함.
  - 그럼에도 불구하고 CSS를 좋아함.

- 두 번째 댓글 요약:
  - 자동 페이지 레이아웃과 포맷팅의 복잡성을 이해하지 못하는 사람들이 많음.
  - 이 복잡성을 단순한 '내가 원하는 대로 해줘' 식으로 추상화하는 것은 불가능함.
  - 웹사이트의 예시로 Gwern Branwen의 사이트를 들며, 원하는 스타일에 맞춰 콘텐츠를 제한하는 것이 중요함.
  - 웹 페이지 레이아웃은 다양한 디스플레이에 맞게 콘텐츠를 표현하는 복잡한 과정임.
  - CSS는 처음부터 웹 페이지를 만들기로 결심한 사람들에게 복잡해 보일 수 있지만, 실제로는 선택의 폭이 넓음.
  - 원하는 결과를 얻기 위해 적절한 도구를 찾고, 콘텐츠를 적절한 형태로 포장하는 과정이 필요함.

- 세 번째 댓글 요약:
  - CSS 포지셔닝과 중앙 배치를 이해하는 데 박스 모델에 대한 이해가 도움이 됨.
  - `display`와 `position` 속성이 포지셔닝을 배우는 데 기초적임.
  - MDN에 이에 대한 유용한 기사가 있음.

- 네 번째 댓글 요약:
  - 기사가 매우 좋고, 특히 상호작용적인 부분이 인상적임.
  - CSS에서 중앙 배치를 쉽게 하는 방법을 제공하는 웹사이트를 오랫동안 사용해옴.

- 다섯 번째 댓글 요약:
  - CSS에서 '중앙 배치'는 고전적인 문제임.
  - CSS가 명확하지 않은 것은 여러 위원회가 동시에 설계한 복잡한 집합체이기 때문임.
  - CSS는 지속적인 변화 속에 개별 모듈의 상태로 존재함.
  - 이는 소프트웨어 개발의 바람직한 방법이 아님.

- 여섯 번째 댓글 요약:
  - CSS가 수십 년이 지나도록 테이블을 중앙에 배치하는 것만큼 효과적인 방법을 제시하지 못함.
  - 그 기간 동안 레이아웃 목적으로 테이블 사용이 부끄러운 것으로 여겨짐.

- 일곱 번째 댓글 요약:
  - 많은 사람들이 CSS에 대해 불만을 가지고 있음.
  - 스타일 지시사항이 서로 충돌하거나, 아무런 효과 없이 실패하는 것이 주요 문제임.

- 여덟 번째 댓글 요약:
  - 기사에서 언급한 바와 같이, Flexbox는 간단한 경우 중앙 배치 문제를 해결함.
  - Flexbox로 해결되지 않는 경우는 단순한 중앙 배치 이상의 복잡한 작업을 수행하고 있기 때문임.

- 아홉 번째 댓글 요약:
  - `position: absolute`, `left: 50%`, `transform: translateX(-50%)`를 사용하는 것이 중앙 배치에 대한 자신의 주요 방법임.

- 열 번째 댓글 요약:
  - CSS에서 div를 중앙에 배치하는 것이 매우 어렵기 때문에 웹 개발을 포기한 이유임.