수직 중앙 정렬

CSS에서 요소를 수직적으로 중앙에 정렬하는 좋은 방법이 없다는 것은 CSS 전체를 평가하는 데 있어서 큰 흠집이었습니다.

문제를 더 크게 만드는 것은 수직 중앙 정렬을 위한 테크닉들이 모호하고 직관적이지 않다는 것이었습니다. 오히려 명백한 코드(vertical-align:middle 같은)는 원할 때는 제대로 동작하지 않는 것처럼 보이는데 말이죠.

현재 수직 중앙 정렬을 위해 시도할 수 있는 것들은 margin을 음수 값으로 주는 것부터, display:table-cell 혹은 가상 요소(pseudo-element)에 꽉찬 높이를 주는 등 어처구니없는 핵(hack)들입니다. 때로는 이런 테크닉을 이용해 일을 마무리했겠지만, 이런 테크닉들은 어떤 상황에는 동작하지 않습니다. 만약 중앙으로 정렬하고 싶은 요소의 크기를 알지 못하고, 그 요소가 부모의 유일한 자식이 아닐경우 어떻게 해야할까요? 가상 요소를 사용해서 해결한 경우, 그 가상 요소를 다른 용도로 써야하는 경우에는 어떻게 해야할까요?

Flexbox와 함께라면 더 이상 걱정할 필요가 없습니다. 이제 어떤 것(수직이든 수평이든)이라도 align-items, align-self, 'justify-content’를 사용하면 힘들이지 않고 정렬할 수 있습니다.

중앙 정렬됨!

이 박스는 수직, 수평 중앙 정렬되었습니다. 이 박스의 텍스트가 넓어지거나 커지더라도 여전히 중앙 정렬됩니다. 한 번 시도해보세요. 그냥 클릭 후 텍스트를 수정하면 됩니다.

기존의 특정 수직 정렬 테크닉과는 다르게, Flexbox를 사용하면 수직 정렬이 다른 형제 요소에 영향을 미치지 않습니다.

Top
Centered
Bottom

HTML

<div class="Aligner">
  <div class="Aligner-item Aligner-item--top"></div>
  <div class="Aligner-item"></div>
  <div class="Aligner-item Aligner-item--bottom"></div>
</div>

CSS

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

이 데모에서 Aligner 컴포넌트를 위해 쓰인 모든 소스 코드는 GitHub에서 보실 수 있습니다.