CSS로 가운데 맞추기

CSS로 레이아웃을 가운데 맞추는 방법들은 많습니다.

그 중 5가지를 알아보도록 하지요.

동영상 버전

레이아웃을 가운데로 맞추는 것에는 다양한 유형이 있습니다. 

주의할 다섯 가지는 다음과 같습니다.

 

1. Squished

width(넓이) 변경에 대응할 수 있어야 합니다.

 

2. Squashed

height(높이) 변경에 대응할 수 있어야 합니다.

 

3. Duplicate

항목 수가 늘어나도 동적으로 늘어나야 합니다.

 

4. Edit

콘텐츠의 길이와 언어에 따라 동적이어야 합니다.

 

5. Flow

문서 방향과 글의 방향에 구애받지 않아야 합니다.

 

5가지 센터링 방법

1. 콘텐트 센터

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

장점 

* 제한된 상황에서도 컨텐츠가 중앙에 잘 배치됩니다.

* 편집을 해도 중앙에 잘 배치됩니다.

* gap 속성은 n개의 자식 사이에 동일한 간격을 보장합니다.

* grid는 기본적으로 행을 생성해줍니다.

 

단점

* 가장 넓은 하위(최대 콘텐츠)는 나머지 모든 항목의 너비를 설정해버립니다.

 

2. Gentle Flex

Gentle Flex는 보다 진정한 센터링 전용 전략입니다.

place-content : center와 달리 센터링 중에 자식 레이아웃의 크기가 변경되지않기 때문에 자연스럽습니다.

가능한 한 자연스럽게 모든 항목을 쌓고 가운데에 배치합니다.

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

장점

* 정렬, 방향 및 분포만 처리합니다.

* 한 컴포넌트씩 각각 영향을 줄 수 있습니다.

* gap 속성은 n개의 자식 사이에 동일한 간격을 보장합니다.

 

단점

* 5가지 방법 중 가장 코드가 깁니다.

 

3. Autobot

Squish, Squash, Edit, Flow 다 좋지만 Duplicate가 아쉬운 방법입니다.

컨테이너는 정렬 스타일이 없는 Flex로 설정되고 직접 자식은 자동 여백으로 스타일이 지정됩니다.

마진을 사용하면 요소의 모든면에서 자동으로 작동합니다.

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

장점

* 빠르고 간편합니다.

 

단점

* 넘칠 때 어색합니다.

* 측면에 닿을 수 있습니다.

* 최적화가 조금 미흡합니다.

4. Fluffy Center

.fluffy-center {
  padding: 10ch;
}

장점

* 가장 단순합니다.

* 컨텐츠를 보호합니다.

* 원자성을 지닙니다.

 

단점

* 유용하지 않게 보일 수 있음.

* 항목 사이사이에 충돌이 있습니다. 각 크기가 매우 확고하기 때문입니다.

 

5. Pop & Plop

 

콘텐츠 크기에 유연하고 동적인 고전적이고 편리한 오버레이 센터링 기술입니다.

때로는 다른 UI 위에 UI를 배치해야하는 경우가 있습니다.

현재 크로스브라우징 등을 고려하여 가장 많이 쓰고있기도 합니다.

 

장점

* 유용함

* 신뢰성

* 필요할 때 매우 유용함

 

단점

* 음수 백분율 코드

* `position:relative` 코드로 감싸줘야 합니다.

* 추가적인 노력 없이는 컨테이너 블록 당 1개만 있을 수 있음

 

 

우승은 !? 

 

Gentle Flex 🎉

 

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

 

 

 

출처 : web.dev/centering-in-css/