[CSS] 가로, 세로 가운데 정렬하는 방법

1. 텍스트를 가로 중앙 정렬하는 방법

text-align 속성 사용

text-align 속성을 사용하면 블록 요소 안의 텍스트를 가로로 가운데에 정렬할 수 있습니다.

.container {
  text-align: center;
}

다음은 예제입니다.

See the Pen 텍스트를 가로 중앙 정렬하는 방법 by saladent (@saladent) on CodePen.

 

 

2. 요소를 가로 중앙 정렬하는 방법

margin 속성 사용 (수평 가운데 정렬)

margin: auto;를 사용하면 block 요소를 가로 중앙에 정렬할 수 있습니다.

.box {
  width: 50%;
  margin: 0 auto;
}

다음은 예제입니다.

See the Pen 요소를 가로 중앙 정렬하는 방법 by saladent (@saladent) on CodePen.

참고로 block 요소에 width를 지정해야 margin: auto;가 작동합니다.

 

 

3. 요소를 세로 중앙 정렬하는 방법

flexbox 사용하기

display: flex;를 사용하면 부모 요소 안의 자식 요소를 세로로 중앙에 쉽게 배치할 수 있습니다.

.container {
  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center;  /* 세로 중앙 */
  height: 100vh; /* 화면 전체 높이 */
}

다음은 예제입니다.

See the Pen 요소를 세로 중앙 정렬하는 방법 by saladent (@saladent) on CodePen.

align-items 속성 설명

• center: 중앙 정렬
• flex-start: 위쪽 정렬
• flex-end: 아래쪽 정렬

 

 

4. 요소를 가로, 세로 완벽히 중앙 정렬하는 방법

position 속성 사용하기

position 속성을 활용하여 요소를 완벽하게 가운데에 정렬할 수 있습니다.

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

다음은 예제입니다.

See the Pen Untitled by saladent (@saladent) on CodePen.

참고로 absolute 대신 fixed를 사용하면 뷰포트 기준으로 요소를 중앙에 고정할 수 있습니다.

 

 

5. Grid 레이아웃을 사용한 중앙 정렬

display: grid;를 사용하면 중앙 정렬이 더욱 간단해집니다.

.container {
  display: grid;
  place-items: center; /* 가로 및 세로 중앙 정렬 */
  height: 100vh;
}

다음은 예제입니다.

See the Pen Grid 레이아웃을 사용한 중앙 정렬 by saladent (@saladent) on CodePen.

 

 

마무리

위에서 소개한 방법들은 CSS를 사용해 요소를 화면 중앙에 정렬하는 기본적인 기법들입니다. 프로젝트의 레이아웃에 따라 flexbox, grid, position 등을 적절히 사용하여 최적의 사용자 경험을 제공합니다.

 

추천 활용:

• 간단한 레이아웃: text-align, margin: auto;
• 복잡한 레이아웃: flexbox, grid