CSS에서 드디어 세로 중앙 정렬 기능이 추가 되었습니다. 기존의 가로 중앙 정렬은 손쉽게 되었지만 세로는 중앙 정렬 기능이 별도로 없었기에, display: flex + align-items: center같은 다소 복잡한 방법을 사용했어야 했는데요.

이제 단 한 줄의 CSS 속성 align-content: center 으로 수직 정렬이 가능해졌습니다.

이 속성으로 추가적인 래퍼(wrapper)나 복잡한 설정 없이도 컨텐츠를 수직 정렬할 수 있게 되었습니다.

이 속성은 Chrome 123, Safari: 17.4부터 지원합니다.

이렇게 꼭 필요한 기능이 왜 이제서야 구현되었는지는 의문이지만, 이제라도 구현이 되어서 다행이네요. 수직정렬을 구현할때 적극적으로 활용하시기를 추천드립니다.

https://news.hada.io/topic?id=16586&utm_source=slack&utm_medium=bot&utm_campaign=T0244AU37S5