CSS에서 수직 센터링을 달성하는 방법

프런트엔드 개발에서는 요소의 수직 중앙 정렬이 매우 일반적인 요구 사항입니다. 일부 초보자에게는 이것이 매우 번거로운 일이 될 수 있습니다. 그러나 실제로 CSS를 사용하여 수직 센터링을 구현하는 방법은 여러 가지가 있습니다. 아래에서 좀 더 실용적인 방법을 소개하겠습니다.

방법 1: 절대 위치 지정 + 여백:auto

이것은 CSS 절대 위치 지정 기능을 사용하고 위쪽 및 왼쪽 값을 설정하고 여백을 자동으로 설정하여 수직 중심을 달성합니다.

먼저 절대 위치 지정을 사용하여 요소를 중앙에 배치해야 합니다.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其它样式 */
}

그런 다음 여백을 자동으로 설정하여 수평 중앙에 배치합니다.

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  /* 其它样式 */
}

이 방법의 장점은 이해하고 구현하기가 더 쉽다는 것입니다. 그리고 호환성도 매우 좋습니다. 그러나 수직으로 중앙에 배치하려는 요소의 높이를 알고 있는 경우에만 작동합니다.

방법 2: Flex 레이아웃

Flex 레이아웃은 CSS3에 새로 추가된 레이아웃 모드입니다. 수직 센터링이 쉬워집니다.

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

.child {
  /* 其它样式 */
}

이 방법의 장점은 매우 편리하고 직관적이며 호환성이 비교적 좋다는 것입니다. 그러나 이전 버전의 브라우저와 호환되어야 하는 경우 일부 호환성 처리가 추가되어야 한다는 점에 유의해야 합니다.

방법 3: 표 레이아웃

표 레이아웃은 수직 중앙 정렬에도 사용할 수 있는 오래된 CSS 레이아웃 방법입니다.

.parent {
  display: table;
  height: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  /* 其它样式 */
}

이 방법의 장점은 호환성도 매우 높고 구현하기 쉽다는 것입니다. 그러나 높은 적응성과 유연성이 요구되는 경우 모든 시나리오에 적합하지는 않다는 점에 유의해야 합니다.

방법 4: Line-height

Line-height를 사용하여 수직 중심을 맞추는 비교적 간단한 방법도 있습니다.

.parent {
  height: 300px; /* 定义容器高度 */
  line-height: 300px; /* 容器高度与line-height相同，使文本垂直居中 */
  text-align: center; /* 水平居中 */
}

.child {
  display: inline-block; /* 行内块级元素 */
  vertical-align: middle; /* 垂直居中 */
  /* 其它样式 */
}

이 방법의 장점은 매우 간단하고 호환성이 좋다는 것입니다. 그러나 이는 인라인 요소 또는 인라인 블록 요소에만 적용되며 세로로 가운데 정렬된 텍스트 시나리오에만 적용된다는 점에 유의해야 합니다.

요약

위에서는 수직 센터링을 달성하기 위한 몇 가지 일반적인 CSS 방법을 소개합니다. 다양한 방법은 다양한 시나리오에 적합하며 실제 필요에 따라 선택해야 합니다. 또한 수직 센터링을 달성하기 위해 때로는 방법의 조합이 필요할 수도 있습니다. 이 글이 여러분이 수직 센터링을 더 쉽게 달성하는 데 도움이 되기를 바랍니다.

위 내용은 CSS에서 수직 센터링을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!