CSS, 2024년에 드디어 "세로 중앙 정렬"이 추가됨
(build-your-own.org)- 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로 감쌀 필요가 없음
- 2024년 드디어 브라우저들이 Flow 레이아웃에
수직 정렬의 역사
- 브라우저에서 수직 정렬은 오랫동안 간단한 방법이 없었음
방법 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>
저는 앱개발을 주로 하다보니 웹 개발 도와줄때 아무 생각 없이 검색해서 나온 flexbox 쓰고 이게 중앙 정렬이겠거니 했는데... 여태 없던거였군요 충격쓰.....