CSS로 중앙 정렬하기

원문: Adam Argyle, https://web.dev/centering-in-css/

여러가지 테스트를 통해 5가지 중앙 정렬 방법 중 어떤 것이 가장 변화에 탄력적으로 대응하는지 확인해보자.

CSS로 중앙 정렬하는 것은 농담과 조롱으로 가득찬 악명 높은 도전이다. 2020 CSS는 많이 발전했고 이제 우리는 이 농담을 순수하게 즐길 수 있다.

만약 비디오를 선호한다면 유튜브로 이 글을 볼 수도 있다. https://youtu.be/ncYzTvEMCyE

도전

중앙 정렬에는 사용 사례, 중앙 정렬을 해야 하는 요소의 수 등에 따라 달라지는 다양한 유형이 있다. 어떤 중앙 정렬 방법이 "우승"했는지 근거를 설명하기 위해 필자는 탄력성 고리(Resilience Ringer)를 만들었다. 이는 중앙 정렬 방법에 대한 스트레스 테스트로, 각각 다른 방법들이 어떻게 균형을 맞추는지 성능을 관찰할 수 있다. 필자는 마지막에는 가장 높은 점수를 받은 방법과 "가장 가치 있는" 방법을 공개할 것이다. 이제 새로운 중앙 정렬의 세상으로 떠나보자.

탄력성 고리

탄력성 고리란, 중앙 정렬 방법이라면 국제 레이아웃, 가변 크기 뷰포트, 텍스트 편집 및 동적 콘텐츠에 대해 탄력적이어야 한다는 필자의 신념을 표현한 것이다. 이러한 원칙은 중앙 정렬 방법이 견뎌야 하는 탄력성 테스트의 기반을 잡는데 도움을 주었다.

1. (가로로) 짓누르기: 중앙 정렬은 너비가 변경되는 것에 대응할 수 있어야 한다.
2. (세로로) 짓누르기: 중앙 정렬은 높이가 변경되는 것에 대응할 수 있어야 한다.
3. 복제하기: 중앙 정렬은 항목 수에 따라 동적으로 변해야 한다.
4. 편집하기: 중앙 정렬은 콘텐츠 길이와 언어에 따라 동적으로 변해야 한다.
5. 흐르기: 중앙 정렬은 문서 방향과 쓰기 모드에 구애받지 않아야 한다.

우승한 방법은 가로/세로로 짓누르고, 복제하고, 편집하고, 다양한 언어와 문서 방향을 변경했을 때 콘텐츠를 중앙에 유지하는 탄력성을 보여야 한다. 이를 증명해야 신뢰할 수 있고 탄력적이며 안전한 중앙 정렬이다.

추가 정보

필자는 메타 정보를 이해하는데 도움이 되도록 시각적 색상 힌트를 사용했다.

• 분홍색 테두리는 중앙 정렬이 영향을 끼치는 범위를 나타낸다.
• 회색 상자는 컨테이너의 배경이다. 컨테이너는 항목을 중앙 정렬한다.
• 컨테이너의 자식 요소들은 배경이 흰색이며 중앙 정렬이 자식 요소 크기에 미치는 영향을 확인할 수 있다.

5가지의 경쟁자

중앙 정렬 방법 5가지가 탄력성 고리 테스트에 입장했다. 그 중 단 한가지만 탄력성 왕관을 받을 수 있다 👸.

1. 콘텐츠 중앙 정렬

1. (가로로) 짓누르기: 매우 좋음
2. (세로로) 짓누르기: 매우 좋음
3. 복제하기: 매우 좋음
4. 편집하기: 매우 좋음
5. 흐르기: 매우 좋음

display: grid와 place-content의 간결함을 이기기는 쉽지 않을 것이다. 이 방법은 자식 요소를 일괄적으로 중앙 정렬하기 때문에 그룹 요소들을 견고히 중앙 정렬하는 기술이다.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

장점

• 공간이 제한되거나 부족할 때도 콘텐츠가 중앙 정렬된다.
• 중앙 정렬을 한 곳에서 유지보수할 수 있다.
• n개의 자식 요소에 대해 동일한 간격을 보장한다.
• 그리드는 기본적으로 행을 만든다.

단점

• 가장 너비가 큰 자식 요소에 맞춰 나머지 자식 요소의 너비가 결정된다. 이에 대해서는 아래의 [부드러운 Flex]에서 자세히 설명한다.

단락과 표제, 프로토타입, 또는 간결한 중앙 정렬이 필요한 매크로 레이아웃에 적합하다.

place-content는 display: grid에서만 사용할 수 있는 건 아니다. display: flex에서도 place-content와 place-item의 이점을 얻을 수 있다.

부드러운 Flex

1. (가로로) 짓누르기: 매우 좋음
2. (세로로) 짓누르기: 매우 좋음
3. 복제하기: 매우 좋음
4. 편집하기: 매우 좋음
5. 흐르기: 매우 좋음

이 방법은 진정한 중앙 정렬이다. place-content: center와는 달리 중앙 정렬을 하는 중에도 자식 요소의 크기가 변경되지 않기 때문에 부드럽다. 가능한 부드럽게 모든 항목을 쌓고 가운데에 배치한다.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

장점

• 정렬, 방향, 분배만 처리하면 된다.
• 중앙 정렬을 한 곳에서 유지보수할 수 있다.
• n개의 자식 요소에 대해 동일한 간격을 보장한다.

단점

• 코드가 가장 길다.

매크로 레이아웃과 마이크로 레이아웃 모두 적합하다.

매크로 레이아웃이란 한 국가의 주 또는 영토와 같이 매우 높은 수준의 넓은 범위의 영역이다. 매크로 레이아웃으로 만들어진 영역은 많은 레이아웃을 포함하고 있는 경향이 있다. 레이아웃이 적용되는 표면이 적을 수록 매크로 레이아웃도 줄어든다. 이렇게 계속 줄어들면 마이크로 레이아웃이 된다.

자동봇

1. (가로로) 짓누르기: 매우 좋음
2. (세로로) 짓누르기: 매우 좋음
3. 복제하기: 좋음
4. 편집하기: 매우 좋음
5. 흐르기: 매우 좋음

컨테이너는 정렬 스타일이 없는 flex로 설정되고, 하위 자식 요소는 여백을 자동으로 설정한다. 요소의 모든 면에서 작동하는 margin: auto는 이전부터 익숙하게 사용하던 방법이다.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

장점

• 재미있는 트릭이다.
• 빠르고 더럽다.

단점

• 넘칠 때 어색한 결과를 보인다.
• 간격이 아니라 분포에 대한 의존은 자식 요소의 면이 닿을 수 있는 레이아웃이 발생할 수 있다는 것을 의미한다.
• 자리에 "밀어 넣는" 것은 최적의 방법으로 보이지 않으며 자식 요소의 크기가 변경되는 결과를 초래할 수 있다.

아이콘이나 가상 요소(pseudo-elements)를 중앙 정렬하는데 적합하다.

폭신폭신한 중앙

1. (가로로) 짓누르기: 나쁨
2. (세로로) 짓누르기: 나쁨
3. 복제하기: 나쁨
4. 편집하기: 매우 좋음
5. 흐르기: 매우 좋음 (단, 논리적 속성을 사용했을 때)

이 방법은 전적으로 자식 요소에만 영향을 끼치면서 중앙 정렬을 할 수 있는 유일한 방법이다. 분홍색 테두리가 내부 요소에만 있는 걸 확인할 수 있다.

.fluffy-center {
  padding: 10ch;
}

장점

• 콘텐츠를 보호한다.
• 코드가 매우 적다.
• 모든 테스트는 내부적으로 해당 중앙 정렬 기술을 포함하고 있다.
• 단어 여백이 간격이다.

단점

• 유용하지 않게 느껴진다.
• 컨테이너와 항목의 크기가 고정적이므로 둘 사이에 충돌이 있다.

단어, 구문 중심의 정렬, 태그, 알약(pills), 버튼, 칩 등에 적합하다.

펑 & 퐁당

1. (가로로) 짓누르기: 보통
2. (세로로) 짓누르기: 보통
3. 복제하기: 나쁨
4. 편집하기: 좋음
5. 흐르기: 좋음

요소 위치를 절대적으로 지정하여 요소가 정상적인 흐름에서 튀어나오기 때문에 "펑"하고 튄다. 그리고 다른 요소들 위에 "퐁당"하고 빠진다. 이 부분은 필자가 가장 유용하다고 생각하는 부분이다. 고전적이고 편리한 오버레이 중앙 정렬 기술로, 콘텐츠 크기에 유연하고 동적으로 대처한다. 때때로 다른 UI 위에 UI를 배치하야 하는 경우가 생기기도 한다.

장점

• 유용하다.
• 신뢰할 수 있다.
• 이 방법이 필요한 상황이 생긴다면 헤아릴 수 없을 만큼 귀중한 방법이다.

단점

• 음수 퍼센테이지 값을 사용한다.
• 블록을 포함하도록 강제하기 위해 position: relative가 필요하다.
• 줄바꿈이 일찍 일어나며 어색하다.
• 추가적인 수정 없이는 컨테이너 블록 당 하나만 적용할 수 있다.

모달, 토스트, 메세지, 스택, 깊이 효과, 팝 오버에 적합하다.

우승자

만약 내가 섬에 있고, 오직 하나의 중앙 정렬만 가질 수 있다면...

[두구두구두구]

부드러운 Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

매크로 및 마이크로 레이아웃에서 모두 유용하기 때문에 필자의 스타일 시트에는 항상 이 방법이 쓰인다. 부드러운 Flex는 필자의 기대를 충족시키고 신뢰할 수 있는 만능 해결책이다. 또한 필자는 본질적인 크기 배열 중독자이기 때문에, 이 방법으로 마무리짓는 경향이 있다. 타이핑해야 할 코드가 많은 것은 사실이지만, 이로 인해 얻는 이점이 더 많다.

MVP

폭신폭신한 중앙

.fluffy-center {
  padding: 2ch;
}

이 방법은 너무 작은 기술이라서 간과하기 쉽지만, 필자의 중앙 정렬 기술의 필수 요소이다. 너무 작아서 가끔 사용하고 있다는 사실을 잊어버리곤 한다.

결론

중앙 정렬 전략을 망가뜨리는 것은 어떤 것일까? 탄력성 고리에 추가할 수 있는 다른 도전은 무엇일까? 필자는 번역과 컨테이너의 자동 높이 조절을 고려했는데... 또 다른 건 무엇이 있을까?

이제 필자가 어떻게 했는지 알았으니 당신은 어떻게 구현할 것인가? 접근 방식을 다양화하고 웹에서 구현할 수 있는 모든 방법을 배우자. 이 글에 나와있는 중앙 정렬 방법처럼 당신만의 중앙 정렬 방법을 만들기 위해 이 글의 코드랩을 따라해보자. 당신이 만든 중앙 정렬 방법을 필자에게 트윗해주면 아래의 [독자의 의견] 섹션에 추가하겠다.

독자의 의견

아직 아무 것도 없다!