CSS의 중앙 정렬 방법이 자주 헷갈린다.
그래서 유형에 따라 필요한 속성들을 싹 정리해보았다.

자신을 중앙으로 보내는 경우

1. position: absolute

  • 수평/수직 중앙: left(50%), top(50%), translate(-50%, -50%)
  • 수평 중앙: left(50%), translateX(-50%)
  • 수직 중앙: top(50%), translateY(-50%)

translate를 통해 자기 자신의 절반만큼 재이동해야 한다.
부모 요소에 relative를 적용하는 것도 잊지 말아야 한다.

2. margin: auto

블록 요소에만 적용할 수 있으며, 수평 중앙 정렬만 가능.
width가 100% 미만이어야 실질적으로 효과가 있다.

부모가 자식을 중앙으로 보내는 경우

1. flex

  • display: flex, justify-contents: center, align-items: center

2. grid

  • display: grid, justify-contents: center, align-items: center

flex와 grid는 사용하는 방식이 완전히 다르지만, 중앙 정렬 속성은 거의 동일하다.

3. place-items

  • display: grid, place-items: center

place-items는 grid의 속성 중 하나이다.

4. text-align: center

텍스트 또는 인라인(인라인블록)인 자식 요소를 수평 중앙으로 보낼 수 있다.

블록/인라인에 따른 수평 중앙

  • 블록 요소는 자기 자신에 margin: auto
  • 인라인(인라인블록)은 부모/상위요소에 text-align: center

인접한 요소와 수직 중앙 맞추기

  • vertical-align: top 또는 middle 또는 bottom
  • transform: translateY

이미지와 텍스트를 정렬하는 경우 자주 사용된다. img 태그에 속성을 적용한다.
vertical-align과 translateY를 함께 사용하는 것이 좋다.
vertical-align로 대략적으로 맞춘 뒤, translateY로 세부 조정.

span 등 인라인 요소는 transform 속성을 가질 수 없음에 유의.
단, img 태그는 인라인 요소이지만 transform이 가능하다.

기타

모니터 화면의 특성상 수평 정렬이 더 중요하다고 할 수 있다.

참고자료

수평/수직 중앙 정렬 - poiemaweb.com
CSS 중앙 정렬의 모든 것 - 코딩웍스, 유튜브