CSS의 가운데 맞춤

일련의 테스트를 거치면서 5가지 센터링 기법을 따라 가장 복원력이 우수한 방법을 찾아보세요.

Adam Argyle

CSS에서 중앙 정렬은 농담과 조롱이 가득한 악명 높은 과제입니다. 2020년 CSS는 모두 성장했습니다. 이제 우리는 이를 망가뜨리는 대신 솔직히 웃을 수 있습니다.

동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.

도전과제

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

The Resilience Ringer

Resilience Ringer는 중앙 정렬 전략이 국제 레이아웃, 가변 크기의 표시 영역, 텍스트 수정, 동적 콘텐츠에 탄력적으로 대응해야 한다는 제 신념을 나타냅니다. 이러한 원칙을 바탕으로 중심 맞춤 기법이 지속될 수 있도록 다음과 같은 탄력성 테스트를 설계했습니다.

  1. 비좁음: 중앙 정렬이 너비 변경을 처리할 수 있어야 함
  2. Squashed: 가운데 맞춤이 높이 변경을 처리할 수 있어야 함
  3. 중복: 항목 수에 따라 중앙에 배치해야 함
  4. 수정: 콘텐츠의 길이와 언어에 따라 중앙 정렬이 동적으로 이루어져야 합니다.
  5. 흐름: 중앙 정렬은 문서 방향 및 작성 모드와 무관해야 합니다.

낙찰된 솔루션은 압축, 비틀기, 복제, 수정, 다양한 언어 모드 및 방향으로 전환하는 동안 콘텐츠를 중앙에 유지하여 탄력성을 입증해야 합니다. 신뢰할 수 있고 탄력적이며 안전한 센터

범례

다음은 컨텍스트 내에서 메타 정보를 유지하는 데 도움이 되는 시각적 색상 힌트입니다.

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

5명의 참가자

5가지 중심 찾기 기법이 회복력 벨을 울리며, 그중 하나만 회복력 왕관 👸을 받게 됩니다.

1. 콘텐츠 센터

VisBug를 사용한 콘텐츠 수정 및 복제
  1. Squish: 좋습니다.
  2. 스쿼시: 좋습니다.
  3. 중복: 좋습니다.
  4. 수정: 좋습니다.
  5. 흐름: 좋습니다.

display: grid의 간결함과 place-content 약식을 능가하기는 어려울 것입니다. 전체 하위 요소를 가운데 정렬하고 정리하기 때문에 읽어야 할 요소 그룹을 위한 확실한 가운데 정렬 기법입니다

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
장점
  • 제한된 공간과 오버플로 상황에서도 콘텐츠가 가운데 정렬됨
  • 한곳에서 중앙 정렬 수정 및 유지보수
  • 간격은 n 하위 요소 간에 동일한 간격을 보장합니다.
  • 그리드가 기본적으로 행을 생성함
단점
  • 가장 넓은 하위 요소 (max-content)가 나머지 모든 요소의 너비를 설정합니다. 이 내용은 부드러운 움직임에서 자세히 설명합니다.

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

2. 부드러운 움직임

  1. Squish: 좋습니다.
  2. 스쿼시: 좋습니다.
  3. 중복: 좋습니다.
  4. 수정: 좋습니다.
  5. 흐름: 좋습니다.

조정된 유연성은 보다 정확한 중심 맞춤전용 전략입니다. place-content: center와 달리 가운데 맞춤 중에 하위 상자 크기가 변경되지 않기 때문에 부드럽고 부드럽습니다. 최대한 부드럽게 모든 항목을 쌓고 중앙에 정렬하며 간격을 둡니다.

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

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

3. Autobot

  1. Squish: 좋음
  2. 스쿼시: 좋음
  3. 중복: 좋음
  4. 수정: 우수
  5. 흐름: 좋음

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

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

아이콘이나 유사 요소를 중앙에 배치하는 데 좋습니다.

4. 푹신한 센터

  1. Squish: 나쁨
  2. 스쿼시: 나쁨
  3. 중복: 좋지 않음
  4. 수정: 좋습니다.
  5. 흐름: 좋습니다. (논리 속성을 사용하는 한)

'푹신한 가운데'는 가장 맛있는 후보이며 요소/하위 요소가 완전히 소유한 유일한 가운데 정렬 기법입니다. 솔로 내부 핑크 테두리를 확인해 보세요.

.fluffy-center {
  padding: 10ch;
}
장점
  • 콘텐츠 보호
  • 핵무기
  • 모든 테스트에는 이 가운데 정렬 전략이 숨겨져 있습니다.
  • 단어 간격이 틈임
단점
  • 쓸모가 없다는 착각
  • 컨테이너와 항목 간에 충돌이 발생합니다. 각 항목이 크기에 관해 매우 확고하기 때문입니다.

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

5. Pop & Plop

  1. Squish: 알겠습니다
  2. 스쿼시: 좋음
  3. 중복: 좋지 않음
  4. 수정: 괜찮습니다.
  5. 흐름: 정상

절대 위치 지정이 요소를 일반 흐름에서 팝하기 때문에 '튀어나옵니다'. 이름의 'plop' 부분은 다른 항목 위에 '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을 따라 이 게시물의 예와 같이 가운데 정렬 예시를 만들어 보세요. 내 버전을 트윗해 주시면 아래의 커뮤니티 리믹스 섹션에 추가하겠습니다.

커뮤니티 리믹스