드디어 추가된 CSS의 '세로 중앙 정렬' 기능

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


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

GeekNews

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

더 많은 콘텐츠를 보고 싶다면?

또는

이미 회원이신가요?

2024년 9월 3일 오전 1:56

 • 

저장 73조회 5,483