CSS의 가운데 맞춤

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

Adam Argyle

CSS에서 중앙 정렬은 농담과 조롱이 가득한 악명 높은 과제입니다. 2020년 CSS는 완전히 성장했으며 이제는 이를 통해 웃을 수 있습니다.

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

도전과제

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

The Resilience Ringer

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

  1. 비좁음: 중앙 정렬이 너비 변경을 처리할 수 있어야 함
  2. 평면화: 중앙 정렬이 높이 변경을 처리할 수 있어야 합니다.
  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. Fluffy Center

  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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

매크로 및 마이크로 레이아웃 모두에 유용하므로 스타일시트에서 항상 찾을 수 있습니다. 기대에 부합하는 결과를 제공하는 전반적으로 신뢰할 수 있는 솔루션입니다. 또한 저는 크기 조절에 관심이 많기 때문에 이 솔루션으로 전환하는 경향이 있습니다. 물론 입력해야 할 내용이 많지만 이 방법이 제공하는 이점이 추가 코드의 단점을 능가합니다.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center는 매우 미묘하여 중앙 정렬 기법으로 간과하기 쉽지만, 중앙 정렬 전략의 핵심입니다. 너무 원자적이다 보니 사용하고 있는지 잊어버릴 때도 있습니다.

결론

어떤 유형의 요소가 가운데 정렬 전략을 방해하나요? 회복력 리더에 추가할 수 있는 다른 과제는 무엇인가요? 컨테이너의 번역 및 자동 높이 전환을 고려했습니다. 그 밖에는 무엇이 있을까요?

이제 제가 어떻게 했는지 알았으니 어떻게 하시겠어요? 접근 방식을 다양화하고 웹에서 빌드하는 모든 방법을 알아보겠습니다. 이 게시물과 함께 제공되는 Codelab을 따라 이 게시물의 예와 같이 가운데 정렬 예시를 만들어 보세요. 트윗으로 내 버전을 보내주시면 아래의 커뮤니티 리믹스 섹션에 추가하겠습니다.

커뮤니티 리믹스