CSS 세로 중앙 정렬

마침내 align-content를 디폴트 레이아웃에 추가하여 단 한 줄의 CSS 속성으로 수직 정렬이 가능해졌다고👀.

flow 레이아웃에 align-content를 구현해서, flexbox나 grid없이 css 속성 1개 만으로 수직 정렬이 가능하다.

더이상 div로 감쌀 필요가 없다.

<div style="align-content: center;">
  <code>align-content</code> just works!
</div>

ref : https://build-your-own.org/blog/20240813_css_vertical_center/