CSS 텍스트 수직 세로 정렬 하는 5가지 방법

웹 개발에서 종종 텍스트를 수직으로 정렬해야 하는 경우가 있습니다. 가운데 정렬, 위쪽 또는 아래쪽 정렬 등 다양한 방식이 있습니다. 이번 글에서는 CSS를 사용하여 텍스트를 수직으로 정렬하는 방법에 대해 알아보겠습니다.

1. line-height 속성 활용하기

line-height 속성을 사용하면 한 줄의 높이를 지정할 수 있습니다. 이 속성을 요소의 높이와 동일하게 설정하면 텍스트가 수직으로 가운데 정렬됩니다.

.vertical-center {
  line-height: 200px; /* 요소의 높이와 동일 */
  height: 200px;
}

2. padding 활용하기

요소의 padding을 조절하여 텍스트를 수직으로 정렬할 수 있습니다. 예를 들어, 텍스트를 수직 중앙에 위치시키려면 padding-top과 padding-bottom을 동일한 값으로 설정하면 됩니다.

.vertical-center {
  padding: 70px 0; /* 요소 높이의 절반만큼 패딩 설정 */
}

3. position과 transform 활용하기

position과 transform을 함께 사용하면 텍스트를 수직으로 정렬할 수 있습니다. 부모 요소에 position: relative;를 설정하고, 자식 요소에 position: absolute;와 transform: translateY(-50%);를 설정하면 텍스트가 수직 중앙에 위치합니다.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4. Flexbox 활용하기

Flexbox는 요소를 정렬하는 데 매우 유용한 도구입니다. 부모 요소에 display: flex;와 align-items: center;를 설정하면 자식 요소들이 수직 중앙에 정렬됩니다.

.parent {
  display: flex;
  align-items: center;
}

5. Grid 활용하기

CSS Grid도 요소를 정렬하는 데 사용할 수 있습니다. 부모 요소에 display: grid;와 align-items: center;를 설정하면 자식 요소들이 수직 중앙에 정렬됩니다.

.parent {
  display: grid;
  align-items: center;
}

이상으로 CSS를 사용하여 텍스트를 수직으로 정렬하는 다양한 방법을 살펴보았습니다. 상황에 맞게 적절한 방법을 선택하여 사용하면 됩니다.