CSS에서 `translate(-50%, -50%)`는 어떻게 완벽한 센터링을 달성합니까?

"번역(-50%, -50%)"을 사용하여 요소 변환

웹 개발에서는 요소를 중앙에 배치하는 것이 일반적인 작업일 수 있습니다. , 특히 전체 화면 이미지나 히어로 섹션의 경우 더욱 그렇습니다. 이 목적으로 자주 사용되는 CSS 조각은 .item { top: 50%; 왼쪽: 50%; 변환: 변환(-50%, -50%); }.

코드 분해

이 코드의 목표는 요소의 중심을 상위 컨테이너의 중심과 정렬하는 것입니다. 개별 구성요소로 분류:

• 상위: 50%; left: 50%;: 요소의 상단 및 왼쪽 위치를 각각 상위 요소 높이 및 너비의 50%로 설정합니다. 변환하지 않으면 요소의 왼쪽 상단이 상위 요소의 중앙에 배치됩니다.
• transform:translate(-50%, -50%);: 이 변환은 요소를 수평 방향과 수평 방향 모두에서 뒤로 이동합니다. 수직 방향은 너비와 높이의 50%만큼만 조정됩니다. 이렇게 하면 요소의 중심이 원래 왼쪽 상단으로 효과적으로 이동됩니다.

시각적 센터링

이 두 스타일 세트를 결합하면 요소의 중심이 정확하게 정렬됩니다. 부모센터. 이 기술은 요소의 크기가 동적이거나 사전에 알 수 없는 경우에 특히 유용합니다.

실제 사례

다음 코드 조각을 고려하세요.

body {
  margin: 0;
  padding: 0;
}

.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%);
}

.parent 요소 위로 마우스를 가져가면 .child::before 요소가 다음과 같이 앞뒤로 이동합니다. 너비와 높이의 50%, .child 요소의 원래 위치를 나타냅니다. 이는 시각적으로나 수학적으로 요소를 중앙에 배치하는 변환(-50%, -50%)의 효과를 보여줍니다.

위 내용은 CSS에서 `translate(-50%, -50%)`는 어떻게 완벽한 센터링을 달성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!