CSS로 중앙 정렬은 어떻게 할 수 있을까?

CSS 중앙 정렬은 최근 들어 상당히 쉬워졌음에도 불구하고 어려운 것 중 하나입니다.

 

web.dev에 소개된 탄력성 고리(The Resilience Ringer)라는 5가지 테스트 요소가 있습니다.

1. Squished: 중앙 정렬은 너비 변경을 처리할 수 있어야 합니다.
2. Squashed: 중앙 정렬은 높이 변경을 처리할 수 있어야 합니다.
3. Duplicate: 중앙 정렬은 항목 수에 따라 동적이어야 합니다.
4. Edit: 중앙 정렬은 콘텐츠의 길이와 언어에 따라 동적이어야 합니다.
5. Flow: 중앙 정렬은 문서 방향 및 쓰기 모드에 독립적이어야 합니다.

좋은 중앙 정렬은 위 요소를 모두 만족하는 경우가 탄력적이며, 안정적인 중앙 정렬이라 할 수 있다고 소개되었습니다.

 

1. 컨텐츠 중앙 정렬 (Content Center)

// html
<div class="container content-center">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

// css
.content-center {
  display: grid;
  place-content: center;
  gap: 1rem;
}

.container {
  border: 1px dashed red;
  padding: 30px;
}

.content {
  width: 300px;
  height: 100px;
  background-color: red;
}

이 방법은 5가지 테스트 요소를 모두 만족하며 간결하고 견고한 방식입니다.

단 가장 너비가 큰 자식 요소에 맞춰 나머지 요소의 크기가 결정됩니다.

 

2. 부드러운 Flex (Gentle Flex)

// html
<div class="container content-center">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

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

.container {
  border: 1px dashed red;
  padding: 30px;
}

.content {
  width: 300px;
  height: 100px;
  background-color: red;
}

Content Center와 마찬가지로 5가지 테스트 요소를 만족하며 견고한 방식입니다.

grid와는 달리 자식의 크기가 변경되지 않기 때문에 유연하고 강력한 기능입니다.

단 앞으로 나올 내용들 중에서 가장 코드가 깁니다.

 

3. 자동봇(autobot)

// html
<div class="container content-center">
  <div class="content">Auto bot 1</div>
  <div class="content">Auto bot 2</div>
  <div class="content">Auto bot 3</div>
  <div class="content">Auto bot 4</div>
</div>

// css
.content-center {
  display: flex;
  gap: 1rem;
}

.content-center > * {
  margin: auto;
}

.container {
  border: 1px dashed red;
  padding: 30px;
}

.content {
  height: 100px;
  background-color: red;
}

컨테이너는 정렬 스타일 없는 flex로 설정하고 하위 자식 요소는 여백을 자동으로 설정하는 방법이다.

재미있는 트릭이지만, 아이콘이나 가상 요소(pseudo-elements)를 중앙 정렬하는데 적합 하다고하며 굳이 사용할 이유는 없을듯 하다.

오히려 flex의 속성들을 사용하는게 더 좋을듯 하다.

 

4. 폭신폭신한 중앙(Fluffy Center)

// html
<div class="container content-center">
  <div class="content">test</div>
</div>

// css
.content-center {
  padding: 5rem
}

.content {
  height: 100px;
  background-color: red;
}

이 방법은 전적으로 자식 요소에만 영향을 끼치면서 중앙 정렬을 하는 방법입니다.

코드가 매우 간결하다는 장점이 있지만 크기가 고정적이고 유동적이지 않을때 유용합니다.

테스트 요소 중 1, 2, 3 모두 나쁘며, 5번 요소의 경우 논리적 속성을 사용했을 경우에만 만족하게 됩니다.

 

5. 펑 & 퐁당(Pop & Plop)

// html
<div class="container content-center">
  <div class="content">test</div>
</div>

// css
.content-center {
  position: relative;
  height: 500px;
  width: 500px;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
}

요소 위치를 정대적으로 지정하여 요소가 정상적인 흐름에서 벗어나오기 때문에 가장 유용하다고 생각된다고 합니다.

고전적인 중앙 정렬 기술로서 컨텐츠 크기에 유연합니다.

 

해당 글에서는 단 하나의 중앙 정렬만 사용할 수 있다면 부드러운 Flex (Gentle Flex)를 사용하겠다고 합니다.

해당 패턴은 배열 형태의 데이터도 무리 없이 표현하며 얻는 이점이 많은 패턴이라고 합니다.

 

이번 글에서는 가로 세로 구분 없는 중앙 정렬과 관련된 내용이였지만, 세로 중앙 정렬이 궁금하다면 이 글에서 확인해보시기 바랍니다.