CSS `transform:translate(-50%, -50%)`는 어떻게 요소를 중앙에 배치합니까?

CSS 변환 속성 이해: 번역(-50%, -50%)

히어로 이미지 또는 전체 화면 요소로 작업하는 경우 , 다음을 포함하는 CSS 코드를 접하는 것이 일반적입니다.

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

이 CSS 스니펫 질문이 제기됩니다: 이 코드는 실제로 무엇을 합니까?

번역의 역할(-50%, -50%)

변환의 목적: 번역( -50%, -50%) 속성은 요소를 특정 위치로 이동하거나 이동하는 속성입니다. 이 경우 요소는 가로 방향과 세로 방향 모두로 번역됩니다.

가로 번역: 번역X(-50%)

번역의 첫 번째 부분은, translateX(-50%), 요소를 너비의 50%만큼 왼쪽으로 이동합니다. 이는 요소의 왼쪽 가장자리를 상위 컨테이너의 중앙으로 이동하는 것과 같습니다.

수직 번역: 번역Y(-50%)

번역의 두 번째 부분 ,translateY(-50%)는 요소를 높이의 50% 위로 이동합니다. 이는 요소의 위쪽 가장자리를 상위 컨테이너의 중앙으로 이동하는 것과 같습니다.

요소 중심 맞추기

결합하면 번역(-50%, -50%) ) 요소의 중심을 상위 컨테이너의 중심으로 효과적으로 이동합니다. 이는 수평 및 수직 모두 시각적으로 중심에 있는 요소를 만드는 데 사용되는 경우가 많습니다.

개념 증명

개념을 설명하려면 다음 코드 조각을 고려하세요.

.parent {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.child {
  width: 50px;
  height: 50px;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

부모 요소 안에 자식 요소를 배치하면 가로, 세로 모두 중앙에 위치하는 것을 확인할 수 있습니다. 이는 변환: 번역(-50%, -50%) 속성이 하위 요소의 중심을 상위 컨테이너의 중심으로 이동했기 때문입니다.

위 내용은 CSS `transform:translate(-50%, -50%)`는 어떻게 요소를 중앙에 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!