# CSS, 2024년에 드디어 "세로 중앙 정렬"이 추가됨

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16586](https://news.hada.io/topic?id=16586)
- GeekNews Markdown: [https://news.hada.io/topic/16586.md](https://news.hada.io/topic/16586.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-09-03T09:59:28+09:00
- Updated: 2024-09-03T09:59:28+09:00
- Original source: [build-your-own.org](https://build-your-own.org/blog/20240813_css_vertical_center/)
- Points: 35
- Comments: 29

## Summary

CSS에 `**align-content**` 속성이 **기본 레이아웃**에 추가되어 2024년부터 단 한 줄의 코드로 수직 정렬이 가능해집니다. 이제 flexbox나 grid 없이도 간단하게 콘텐츠를 중앙에 정렬할 수 있게 되었습니다. **마침내!!!**

## Topic Body

- CSS는 마침내 `align-content`를 디폴트 레이아웃에 추가하여 **단 한 줄의 CSS 속성**으로 수직 정렬이 가능해짐   
  - 지원 버전 Chrome 123, Firefox 125, Safari: 17.4  
- 현재는 기본 레이아웃(flow)에서 `align-content`가 동작하지 않으므로 flexbox 나 grid로 전환해야함   
  - 2024년 드디어 브라우저들이 Flow 레이아웃에 `align-content`를 구현함   
  - 이제 flexbox, grid 없이 그냥 CSS 속성 1개 만으로 정렬 됨  
  - 따라서, 콘텐츠를 div로 감쌀 필요가 없음   
  
### 수직 정렬의 역사  
- 브라우저에서 수직 정렬은 오랫동안 간단한 방법이 없었음  
  
#### 방법 1: 테이블 셀  
  
- Sanity(제정신인가?): ★★★☆☆   
- flow(기본값), table, flexbox, grid 등 4가지 주요 레이아웃이 있고, 콘텐츠 정렬은 레이아웃에 따라 다름  
- flexbox와 grid가 늦게 추가되었기에 처음엔 table이 사용됨  
```  
<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>  
```  
  
##### 방법 2: 절대 위치  
  
- Sanity: ☆☆☆☆☆  
- flow 레이아웃이 도움이 안 되므로 절대 위치를 사용해 우회함  
```  
<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>  
```  
  
##### 방법 3: 인라인 컨텐츠  
  
- Sanity: ☆☆☆☆☆   
- flow 레이아웃은 콘텐츠 정렬에 도움이 안됨. 한 라인 내에서의 수직 정렬을 허용함  
- 그럼 콘테이너 높이 만큼 줄을 만들면 어떨까 ?  
```  
<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  
```  
```  
.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}  
```  
- 뭔가 이상해지기 좋음   
  
##### 방법 4: 한 줄 flexbox  
  
- Sanity: ★★★☆☆  
- Flexbox는 웹이 시작된 지 20년이 지난 후 널리 사용되기 시작  
- 한 줄 모드(기본값)에서 라인이 수직 공간을 채우고, `align-items`로 라인 내 항목을 정렬함  
  
```  
<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>  
```  
- 또는 줄을 세로로 만들고  justify-content를 사용하여 항목을 정렬  
  
```  
<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>  
```  
  
##### 방법 5: 여러 줄 flexbox  
  
- Sanity: ★★★☆☆  
- 여러 줄 flexbox에서는 `align-content`로 라인을 정렬 가능  
  
```  
<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>  
```  
  
##### 방법 6: grid 컨텐츠  
  
- Sanity: ★★★★☆   
- grid는 더 나중에 나왔기 때문에, 정렬이 좀 간단해짐  
  
```  
<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>  
```  
  
##### 방법 7: grid 셀  
  
- Sanity: ★★★★☆  
- `align-content`는 셀을 컨테이너에 정렬하고, `align-items`는 컨텐츠를 셀에 정렬함  
  
```  
<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>  
```  
  
##### 방법 8: auto 마진  
  
- Sanity: ★★★☆☆  
- flow 레이아웃에서 `margin:auto`는 수평으로는 중앙 정렬되지만 수직으로는 안 됨   
- flexbox와 grid는 이런 불합리성을 공유하지 않음  
  
```  
<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>  
```  
  
##### 방법 9: 2024년의 이 글  
  
- Sanity: ★★★★★   
- 애초에 브라우저가 이걸 추가했어야 함  
```  
<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>  
```

## Comments



### Comment 30120

- Author: tobesimple7
- Created: 2024-10-17T06:45:20+09:00
- Points: 1

오우~ 이런 기능이~~

### Comment 28865

- Author: seunggi
- Created: 2024-09-12T14:30:47+09:00
- Points: 1

컴퓨터 사이언스의 가장어려운 것 - 중앙정렬  
  
https://tonsky.me/blog/centering/

### Comment 28621

- Author: mongsilsushi
- Created: 2024-09-06T09:15:27+09:00
- Points: 1

마참내!

### Comment 28574

- Author: sgwanlee
- Created: 2024-09-04T17:21:08+09:00
- Points: 1

css가 너무 쉬우졌는데? ㅋㅋㅋㅋ

### Comment 28570

- Author: jwh926
- Created: 2024-09-04T13:55:59+09:00
- Points: 1

🙏🏻🙏🏻🙏🏻🙏🏻

### Comment 28569

- Author: rulerwithcss
- Created: 2024-09-04T13:52:28+09:00
- Points: 1

oh my god, cheese crust

### Comment 28568

- Author: shpkc
- Created: 2024-09-04T12:34:37+09:00
- Points: 1

드디어 !

### Comment 28551

- Author: halfenif
- Created: 2024-09-04T06:19:29+09:00
- Points: 1

늦었다구! 늦었다구! 늦었다구!

### Comment 28543

- Author: uoayop
- Created: 2024-09-03T18:33:43+09:00
- Points: 2

마참내

### Comment 28542

- Author: aer0700
- Created: 2024-09-03T17:56:27+09:00
- Points: 1

기쁘다

### Comment 28539

- Author: koyokr
- Created: 2024-09-03T16:22:09+09:00
- Points: 1

ㅋㅋㅋ

### Comment 28537

- Author: nemorize
- Created: 2024-09-03T15:22:52+09:00
- Points: 1

a-men

### Comment 28535

- Author: carnoxen
- Created: 2024-09-03T14:56:12+09:00
- Points: 1

기존 웹 사이트가 이 변경으로 인해 구조가 엉망이 될 위험이 있을까요?

### Comment 28780

- Author: bluekai17
- Created: 2024-09-10T16:11:15+09:00
- Points: 1
- Parent comment: 28535
- Depth: 1

저도 이 부분이 궁금하네요

### Comment 28532

- Author: ng0301
- Created: 2024-09-03T14:32:31+09:00
- Points: 1

마내침!

### Comment 28531

- Author: yatmak
- Created: 2024-09-03T14:05:43+09:00
- Points: 1

드디어 Web 3.0의 시대가 왔군요

### Comment 28529

- Author: plaaat0102
- Created: 2024-09-03T13:50:17+09:00
- Points: 2

댓글이 즐거움으로 가득해요 ㅋㅋㅋㅋㅋ..

### Comment 28527

- Author: godppun
- Created: 2024-09-03T13:34:16+09:00
- Points: 1

진짜 마침내...

### Comment 28526

- Author: kangkung9225
- Created: 2024-09-03T12:57:04+09:00
- Points: 1

오...? 해야하는 건가 ㅎㅎ..

### Comment 28525

- Author: [hidden]
- Created: 2024-09-03T12:51:41+09:00
- Points: 1

[숨김 처리된 댓글입니다]

### Comment 28524

- Author: qurare
- Created: 2024-09-03T12:37:08+09:00
- Points: 1

마참내

### Comment 28521

- Author: savvykang
- Created: 2024-09-03T12:28:50+09:00
- Points: 1

WA!!!

### Comment 28520

- Author: joyfui
- Created: 2024-09-03T12:22:37+09:00
- Points: 1

와!!!

### Comment 28517

- Author: mkyoon
- Created: 2024-09-03T11:09:02+09:00
- Points: 1

햄볶아요!

### Comment 28516

- Author: wedding
- Created: 2024-09-03T11:08:39+09:00
- Points: 1

저는 앱개발을 주로 하다보니 웹 개발 도와줄때 아무 생각 없이 검색해서 나온 flexbox 쓰고 이게 중앙 정렬이겠거니 했는데... 여태 없던거였군요 충격쓰.....

### Comment 28514

- Author: illiil1lii
- Created: 2024-09-03T11:07:19+09:00
- Points: 1

무야호!

### Comment 28513

- Author: huiya
- Created: 2024-09-03T10:44:23+09:00
- Points: 1

드디어!

### Comment 28512

- Author: tjddnjsjo
- Created: 2024-09-03T10:43:47+09:00
- Points: 1

절겁다!

### Comment 28511

- Author: pkj3186
- Created: 2024-09-03T10:17:37+09:00
- Points: 1

마참내!