고정 및 절대 위치 Div를 완벽하게 중앙에 배치하는 방법은 무엇입니까?

고정 위치 Div의 중앙 정렬 고정

고정 위치 div의 중앙 정렬은 절대 위치 요소에 대한 기존 방법을 사용하는 것이 어려울 수 있습니다. 고정 위치 div의 경우 left 속성을 50%로 설정하고 margin-left를 div 너비의 절반으로 설정하는 "해킹"이 실패합니다.

이 문제를 해결하고 정확한 센터링을 달성하려면 CSS3를 활용하는 것이 더 나은 솔루션입니다. 속성을 변환합니다. 명시적인 너비를 설정하지 않아도 이 방법은 div를 중앙에 효과적으로 배치합니다.

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

이 솔루션은 div의 중앙을 뷰포트의 중앙과 정렬하여 브라우저 창 크기가 조정되는 경우에도 중앙에 유지되도록 합니다. . 또한 변환 속성은 최신 브라우저에서 널리 지원됩니다.

보너스: 절대 위치 요소에 대한 중앙 정렬 개선

절대 위치 요소의 경우 다음 접근 방식을 사용하면 다음과 같은 이점을 얻을 수 있습니다. 보다 정확하고 다재다능한 센터링 방법:

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

여기서 요소는 다음과 같이 절대적으로 배치되고 정렬됩니다. 자체 높이와 너비를 기준으로 위치를 변환합니다. 이 방법은 여백 조정이 필요 없이 정확한 센터링을 제공합니다.

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