CSS의 가운데 맞춤

5가지 중심 잡기 기법을 따라 일련의 테스트를 거치며 어떤 기법이 변화에 가장 탄력적인지 확인합니다.

Adam Argyle

CSS에서 중앙 정렬은 농담과 조롱이 가득한 악명 높은 과제입니다. 2020년 CSS가 완전히 성장했고 이제 우리는 이를 악물지 않고도 솔직하게 농담을 할 수 있습니다.

동영상을 선호하는 경우 이 게시물의 YouTube 버전을 참고하세요.

과제

중앙 정렬에는 다양한 유형이 있습니다. 사용 사례, 중앙에 배치할 항목 수 등이 다르기 때문입니다. '성공적인' 중앙 배치 기법의 근거를 보여주기 위해 Resilience Ringer를 만들었습니다. 각 센터링 전략의 균형을 맞추고 성능을 관찰하기 위한 일련의 스트레스 테스트입니다. 마지막에는 가장 높은 점수를 받은 기법과 '가장 가치 있는' 기법을 공개합니다. 새로운 중심 잡기 기법과 솔루션을 얻어 가시기 바랍니다.

회복탄력성 링어

Resilience Ringer는 중앙 정렬 전략이 국제 레이아웃, 다양한 크기의 표시 영역, 텍스트 편집, 동적 콘텐츠에 탄력적이어야 한다는 제 신념을 나타냅니다. 이러한 원칙은 중심화 기법이 견뎌야 하는 다음과 같은 복원력 테스트를 형성하는 데 도움이 되었습니다.

  1. Squished: centering should be able to handle changes to width
  2. Squashed: centering should be able to handle changes to height
  3. 중복: 중앙 정렬은 항목 수에 따라 동적으로 이루어져야 합니다.
  4. 수정: 콘텐츠의 길이와 언어에 따라 중앙 정렬이 동적으로 이루어져야 합니다.
  5. 흐름: 중앙 정렬은 문서 방향 및 쓰기 모드와 무관해야 합니다.

우승 솔루션은 다양한 언어 모드와 방향으로 압축, 축소, 복제, 수정, 교체되는 동안 콘텐츠를 중앙에 유지하여 복원력을 입증해야 합니다. 신뢰할 수 있고 복원력이 우수한 센터, 안전한 센터입니다.

Legend

일부 메타 정보를 컨텍스트에 유지하는 데 도움이 되도록 시각적 색상 힌트를 제공했습니다.

  • 분홍색 테두리는 중앙 정렬 스타일의 소유권을 나타냅니다.
  • 회색 상자는 항목을 중앙에 배치하려는 컨테이너의 배경입니다.
  • 각 하위 요소의 배경색은 흰색이므로 중앙 정렬 기법이 하위 상자 크기에 미치는 영향을 확인할 수 있습니다 (있는 경우).

참가자 5명

5가지 중심 잡기 기법이 회복탄력성 링에 들어오지만, 회복탄력성 왕관을 차지하는 것은 단 하나입니다 👸.

1. 콘텐츠 센터

VisBug를 사용하여 콘텐츠 수정 및 복제
  1. 스퀴시: 좋아!
  2. 스쿼시: 좋습니다.
  3. 중복: 좋습니다.
  4. 수정: 좋습니다.
  5. 흐름: 좋음

display: grid 및 place-content 속기법의 간결함을 능가하기는 어려울 것입니다. 하위 요소를 일괄적으로 중앙에 배치하고 정렬하므로 읽어야 하는 요소 그룹을 중앙에 배치하는 데 적합한 기법입니다.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
장점
  • 공간이 제한되고 오버플로가 발생해도 콘텐츠가 중앙에 배치됨
  • 수정 및 유지보수 작업을 한곳에서 집중적으로 처리
  • 간격은 n개의 하위 요소 간에 동일한 간격을 보장합니다.
  • 그리드는 기본적으로 행을 만듭니다.
단점
  • 가장 넓은 하위 요소 (max-content)가 나머지 모든 요소의 너비를 설정합니다. 이에 대해서는 Gentle Flex에서 자세히 설명합니다.

단락과 헤드라인, 프로토타입 또는 일반적으로 읽기 쉬운 중앙 정렬이 필요한 항목이 포함된 매크로 레이아웃에 적합합니다.

2. Gentle Flex

  1. 스퀴시: 좋아!
  2. 스쿼시: 좋습니다.
  3. 중복: 좋습니다.
  4. 수정: 좋습니다.
  5. Flow: 좋습니다.

Gentle Flex는 보다 진정한 센터링 전용 전략입니다. place-content: center와 달리 중앙 정렬 중에 하위 요소의 상자 크기가 변경되지 않으므로 부드럽고 자연스럽습니다. 모든 항목은 최대한 부드럽게 쌓이고, 중앙에 배치되고, 간격이 조정됩니다.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
장점
  • 정렬, 방향, 분포만 처리
  • 수정 및 유지보수를 한곳에서 처리
  • 간격은 n개의 하위 요소 간에 동일한 간격을 보장합니다.
단점
  • 가장 많은 코드 줄 수

매크로 및 마이크로 레이아웃 모두에 적합합니다.

3. Autobot

  1. 스퀴시: 좋음
  2. 스쿼시: 좋음
  3. 중복: 괜찮음
  4. 수정: great
  5. 흐름: 우수

컨테이너는 정렬 스타일 없이 flex로 설정되고 직접 하위 요소는 자동 여백으로 스타일이 지정됩니다. 요소의 모든 면에서 작동하는 margin: auto에는 향수를 불러일으키는 멋진 무언가가 있습니다.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
장점
  • 재미있는 트릭
  • 빠르고 간단함
단점
  • 오버플로 시 어색한 결과
  • 간격 대신 분포를 사용하면 하위 요소가 측면에 닿는 레이아웃이 발생할 수 있습니다.
  • 위치로 '푸시'되는 것은 최적의 방법이 아니며 하위 요소의 상자 크기가 변경될 수 있습니다.

아이콘이나 가상 요소를 중앙에 배치하는 데 적합합니다.

4. 플러피 센터

  1. 스퀴시: 나쁨
  2. 스쿼시: 나쁨
  3. 중복: 나쁨
  4. 수정: 좋습니다.
  5. Flow: 좋습니다. (논리적 속성을 사용하는 경우)

'fluffy center'는 가장 맛있어 보이는 후보이며, 전적으로 요소/하위 요소가 소유하는 유일한 중앙 정렬 기법입니다. 안쪽의 분홍색 테두리가 보이나요?

.fluffy-center {
  padding: 10ch;
}
장점
  • 콘텐츠 보호
  • 핵무기
  • 모든 테스트에는 이 중심 전략이 비밀리에 포함되어 있습니다.
  • 단어 간격은 공백입니다.
단점
  • 유용하지 않다는 착각
  • 컨테이너와 항목 사이에 충돌이 발생합니다. 당연히 각 항목이 크기를 매우 확고하게 지정하고 있기 때문입니다.

단어 또는 구문 중심의 중앙 정렬, 태그, 필, 버튼, 칩 등에 적합합니다.

5. Pop & Plop

  1. 스퀴시: 알겠습니다.
  2. 스쿼시: 알겠습니다.
  3. 중복: 나쁨
  4. 수정: 괜찮음
  5. 흐름: 양호

절대 위치 지정은 요소를 일반 흐름에서 튀어나오게 하므로 '튀어나옵니다'. 이름의 'plop' 부분은 다른 항목 위에 올려놓을 때 가장 유용하다는 점에서 유래했습니다. 콘텐츠 크기에 따라 유연하고 동적으로 작동하는 고전적이고 편리한 오버레이 중앙 정렬 기법입니다. 다른 UI 위에 UI를 배치해야 할 때가 있습니다

장점
  • 유용함
  • 안정성
  • 필요할 때 매우 유용함
단점
  • 음수 백분율 값이 있는 코드
  • 포함 블록을 강제하려면 position: relative가 필요합니다.
  • 조기 및 어색한 줄바꿈
  • 추가 작업 없이 포함 블록당 1개만 있을 수 있습니다.

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

수상 기업

무인도에 갇혀서 단 한 가지의 마음 챙김 기법만 사용할 수 있다면…

[드럼롤]

Gentle Flex 🎉

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

매크로 레이아웃과 마이크로 레이아웃 모두에 유용하므로 항상 스타일시트에서 찾을 수 있습니다. 기대에 부응하는 결과를 제공하는 전반적으로 신뢰할 수 있는 솔루션입니다. 또한 저는 고유 크기 조정에 중독되어 있기 때문에 이 솔루션으로 넘어가는 경향이 있습니다. 입력할 내용이 많지만, 이로 인해 얻는 이점이 추가 코드보다 큽니다.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center는 너무 작아서 센터링 기법으로 간과하기 쉽지만, 제 센터링 전략의 핵심입니다. 너무 원자적이어서 사용하고 있다는 사실을 잊어버릴 때도 있습니다.

결론

어떤 것들이 중심 잡기 전략을 방해하나요? 회복탄력성 훈련에 어떤 다른 과제를 추가할 수 있을까요? 컨테이너의 변환과 자동 높이 전환을 고려했습니다. 또 무엇이 있을까요?

이제 제가 어떻게 했는지 알았으니 여러분은 어떻게 하시겠어요? 접근 방식을 다양화하고 웹에서 빌드하는 모든 방법을 알아보겠습니다. 이 게시물의 Codelab을 따라 이 게시물에 나온 것과 같은 중앙 정렬 예시를 직접 만들어 보세요. 여러분의 버전을 트윗해 주시면 아래의 커뮤니티 리믹스 섹션에 추가하겠습니다.

커뮤니티 리믹스