CSS를 사용하여 고정 위치 DIV를 중앙에 배치하는 방법은 무엇입니까?

고정 위치 DIV 중심 지정

CSS를 사용하여 절대 위치 지정 요소를 사용하면 웹페이지에서 고정 위치 DIV 중심을 쉽게 지정할 수 있습니다. left: 50%, width: 400px; 및 margin-left: -200px; 와 관련된 해킹입니다. 왼쪽 여백을 너비의 절반으로 설정하여 요소를 효과적으로 중앙에 배치합니다.

그러나 이 접근 방식은 고정 위치 DIV를 처리할 때 실패합니다. 대신 요소의 가장 왼쪽 모서리는 margin-left 선언을 무시하고 50%에 배치됩니다. 이 문제를 해결하고 고정 위치 요소를 중앙 정렬하려면 대체 방법이 필요합니다.

CSS3 변환을 사용한 솔루션

보다 효과적인 접근 방식은 CSS3의 변환 속성을 활용하는 것입니다. 마진에 의존합니다.

.centered {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
}

이에 code:

• position:fixed는 요소를 페이지의 고정 위치에 유지합니다.
• left: 50%는 요소의 왼쪽 가장자리를 페이지의 50% 표시에 정렬합니다.
• transform:translate(-50%, 0)은 음수 수평 방향으로 너비의 절반만큼 요소를 오프셋하여 효과적으로 중앙에 배치합니다.

이 방법은 고정 너비 또는 상대 너비를 지정하지 않고도 고정 위치 요소에 대해 정확한 센터링을 제공합니다.

위 내용은 CSS를 사용하여 고정 위치 DIV를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!