CSS를 이용한 가운데 정렬 방법

가끔 CSS를 사용하여 가로 혹은 세로로 가운데 정렬을 해야 하는 경우가 있습니다. 가운데 정렬이 잘 안 되는 경우에 참조할 수 있는 사이트입니다.

링크된 사이트에서는 다양한 상황에서 가로(수평), 세로(수직), 가로와 세로(수평 및 수직)로 가운데 정렬시키는 방법을 설명합니다. 잘 안 되는 경우 각 시나리오별로 제시하는 방법을 적용해보면 잘 될 수 있습니다.

보통 다음과 같은 CSS 코드로 시도해볼 수 있습니다.

.center {
  text-align: center;
}

블록(block) 레벨 요소인 경우 다음 코드를 사용할 수 있습니다.

.center-me {
  margin: 0 auto;
}

세로로 가운데 정렬하는 경우, 다음과 같은 방법으로 세로로 가운데 정렬을 시도해보니 잘 되는 경우가 있었습니다.

참고