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

"변환: 번역(-50%, -50%)"의 역할 이해

영웅 이미지나 요소로 작업할 때 전체 화면에 걸쳐 다음과 같은 CSS 코드를 접하는 것이 일반적입니다.

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

그러나 이 코드는 실제로 무엇을 하는가 달성하시겠습니까?

이 코드를 이해하는 열쇠는 요소의 중심을 상위 요소의 중심과 정렬한다는 점을 인식하는 것입니다. 이는 다음을 통해 달성됩니다:

• translateX(-50%): 요소를 너비의 50%만큼 왼쪽으로 이동하여 효과적으로 x축 중앙에 배치합니다.
• translateY(-50%): 요소를 원래 크기의 50%만큼 위로 이동합니다. 높이를 y축을 따라 중앙에 배치합니다.

요소를 너비와 높이의 절반만큼 왼쪽 및 위쪽으로 뒤로 이동하면 요소의 중심이 상위의 중심과 정렬되어 수평과 높이를 모두 달성합니다. 및 수직 중앙 정렬.

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

body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}

마우스를 가리키면 상위 요소 위에서 고스트 요소(.child::before)는 변환: 번역(-50%, -50%) 속성을 적용하여 시각적으로 중앙에 배치됩니다.

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