Div에서 텍스트를 수직으로 정렬하는 방법

div로 작업할 때 div 내의 텍스트가 정렬되었는지 확인해야 하는 경우가 있습니다. 수직으로 가운데. 이는 다양한 방법을 통해 달성할 수 있습니다.

line-height 사용

div의 높이가 50px와 같이 고정된 경우 line-height를 간단히 사용할 수 있습니다. CSS 속성.

#abc {
  height: 50px;
  line-height: 50px;
}

이렇게 하면 텍스트가 div 내에서 수직으로 중앙에 배치됩니다.

표시 속성 사용

여러 줄로 된 텍스트의 경우 요소를 확장하고 표시 속성과 수직 정렬을 적용합니다.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

변형 속성 사용

또 다른 방법은 변환 Y() 함수와 함께 변환 속성을 사용하는 것입니다. 이는 디스플레이 속성을 지원하지 않는 구형 브라우저에 특히 유용합니다.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}