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

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

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

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

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

.center {
  text-align: center;
}

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

.center-me {
  margin: 0 auto;
}

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

CSS로 세로로 가운데 정렬하기

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다