2026년 CSS 센터링의 현주소

CSS-Tricks가 2026년 시점에서 CSS 센터링을 처음부터 다시 정리하는 글을 발행했다. 저자는 요소를 수직·수평 중앙에 배치하는 코드를 100가지까지 열거한 뒤, 그중 약 60개는 해킹에 가깝고 실질적으로 유효하면서 고유한 방법은 15개 미만이라고 분류했다.

무엇이 새로운가

글에서 제시하는 핵심 권장 패턴은 세 가지다. display: block에서 align-content: center와 justify-items: center를 쓰는 방식, display: grid에서 place-content: center를 쓰는 방식, 그리고 display: flex에서 flex-wrap: wrap과 place-content: center를 조합하는 방식이다. 단일 아이템일 때 세 방식은 시각적으로 동일하지만, 복수 아이템이나 크기가 다른 아이템에서는 명확히 다르게 동작한다는 점을 데모로 보여준다. 텍스트 센터링에서는 폰트 메트릭에 의한 위아래 여백 문제를 지적하며, text-box 속성으로 불필요한 공간을 잘라낼 수 있다고 소개한다. 다만 justify-items를 block 컨테이너에서 사용하는 것은 현재 Chrome에서만 지원된다는 점을 원문이 직접 경고하고 있다.

설정 파일에 어떤 의미인가

CSS 센터링 자체는 빌드 도구나 프로젝트 설정 파일에 직접적인 변경을 요구하지 않는다. 다만 몇 가지 간접적 접점이 있다. Stylelint 같은 CSS 린터를 사용하는 팀이라면, text-box나 block 컨테이너의 justify-items 처럼 브라우저 지원이 제한적인 속성을 쓸 때 no-unsupported-browser-features 류의 규칙과 충돌할 수 있다. Browserslist 설정에 Chrome 외 브라우저가 포함되어 있으면 린트 경고가 뜰 가능성이 높다. PostCSS 플러그인이나 Autoprefixer가 이 속성들을 어떻게 처리하는지도 확인해볼 만하다. 원문에서는 설정 파일과의 상호작용을 구체적으로 다루지 않으므로, 실제 프로젝트에 적용할 때는 사용 중인 도구 체인의 CSS 속성 지원 현황을 별도로 점검해야 한다.

다음 단계 제안

원문이 링크하는 “The fundamentals of alignment in CSS” 심화 글을 먼저 읽는 것을 권한다. 센터링 코드를 외우기보다 content-level과 item-level 정렬, 두 축의 개념을 이해하면 어떤 레이아웃에서든 적절한 속성을 고를 수 있다. 팀 CSS 스타일 가이드가 있다면, block·grid·flex 각 상황별 권장 센터링 패턴을 한 줄씩 명시해 두는 것만으로 리뷰 시간이 줄어들 것이다.

---

원문 전체 보기: The State of CSS Centering in 2026 (CSS-Tricks)