콘텐츠 중앙 정렬: 콘텐츠를 수평 및 수직으로 중앙 정렬

콘텐츠를 수평 및 수직으로 중앙 정렬하는 것은 웹 페이지의 레이아웃에서 중요한 부분입니다. CSS를 사용하여 콘텐츠를 가운데에 배치하는 다양한 방법을 살펴보겠습니다.

1. Flexbox 사용

• Flexbox 중앙 정렬: display: flex;와 justify-content: center;, align-items: center;를 사용하여 수평 및 수직 중앙 정렬을 할 수 있습니다.
• 예시:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 전체 뷰포트 높이 */
}

 

2. Grid Layout 사용

• Grid 중앙 정렬: display: grid;와 place-items: center;를 사용하여 콘텐츠를 중앙에 배치합니다.
• 예시:

 

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

 

3. Absolute Positioning

• 절대 위치를 사용한 중앙 정렬: position: absolute;, top: 50%;, left: 50%;, transform: translate(-50%, -50%);를 사용합니다.
• 예시:

 

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

 

4. Margin Auto

• Margin을 사용한 수평 중앙 정렬: margin: 0 auto;를 사용하여 블록 요소를 수평 중앙에 배치합니다.
• 예시:

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

 

5. Line-Height

• Line-Height를 사용한 단일 행 텍스트 중앙 정렬: 부모 컨테이너의 높이와 같은 line-height 값을 설정합니다.
• 예시:

.container {
  height: 100px;
  line-height: 100px;
}

 

6. Table Cell

• Table Cell을 사용한 중앙 정렬: display: table-cell;와 vertical-align: middle;을 사용합니다.
• 예시:

.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

 

 

7. Text-Align과 Padding

• Text-Align과 Padding을 사용한 수평 중앙 정렬: text-align: center;와 상하 패딩으로 수평 중앙 정렬을 구현합니다.
• 예시:

.container {
  text-align: center;
  padding: 50px 0;
}

 

 

8. Vertical Align

• Vertical Align을 사용한 인라인 또는 인라인-블록 요소 중앙 정렬: vertical-align: middle;을 사용하여 수직 중앙 정렬합니다.
• 예시:

.inline-block {
  vertical-align: middle;
  display: inline-block;
}

 

9. Transform Translate

• Transform Translate를 사용한 중앙 정렬: transform: translateY(50%);로 요소를 수직 중앙에 배치합니다.
• 예시:

 

.content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

 

10. Padding과 Text-Align

• Padding과 Text-Align을 사용한 수평 중앙 정렬: padding과 text-align: center;를 사용하여 수평 중앙 정렬합니다.
• 예시:

.container {
  padding: 0 20px;
  text-align: center;
}

 

 

11. Margin과 Vertical Align

• Margin과 Vertical Align을 사용한 수직 중앙 정렬: vertical-align: middle;과 margin-top 또는 margin-bottom으로 조정합니다.
• 예시:

.inline-block {
  display: inline-block;
  vertical-align: middle;
  margin-top: 50px;
}

 

12. Flexbox와 Margin Auto

• Flexbox와 Margin Auto를 사용한 중앙 정렬: Flexbox의 align-items와 justify-content와 함께 margin: auto;를 사용합니다.
• 예시:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  margin: auto;
}