▲

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

 (build-your-own.org)
35P by xguru 3달전 | favorite | 댓글 29개
  • 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>
▲
tobesimple7 1달전  [-]

오우~ 이런 기능이~~

답변달기
▲
plaaat0102 3달전  [-]

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

답변달기
▲
seunggi 2달전  [-]

컴퓨터 사이언스의 가장어려운 것 - 중앙정렬

https://tonsky.me/blog/centering/

답변달기
▲
sgwanlee 3달전  [-]

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

답변달기
▲
jwh926 3달전  [-]

🙏🏻🙏🏻🙏🏻🙏🏻

답변달기
▲
rulerwithcss 3달전  [-]

oh my god, cheese crust

답변달기
▲
halfenif 3달전  [-]

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

답변달기
▲
carnoxen 3달전  [-]

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

답변달기
▲
bluekai17 2달전  [-]

저도 이 부분이 궁금하네요

답변달기
▲
yatmak 3달전  [-]

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

답변달기
▲
godppun 3달전  [-]

진짜 마침내...

답변달기
▲
kangkung9225 3달전  [-]

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

답변달기
▲
composite 3달전  [-]

IE6 시절에는 방법 2와 3 밖에 없었는데...

답변달기
▲
wedding 3달전  [-]

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

답변달기