CSS를 사용하여 고정 및 절대 위치 Div를 정확하게 중앙에 배치하려면 어떻게 해야 합니까?

고정 위치 Div에 대한 정확한 정렬 달성

고정 위치 요소를 중앙에 맞추는 것은 어려울 수 있습니다. 특히 "절반 너비 여백" 트릭의 한계에 직면한 후에는 더욱 그렇습니다. 배치된 요소. 다행히 CSS3는 이 문제에 대한 솔루션을 제공합니다.

고정 위치 Div에 대한 솔루션:

고정 위치 div를 중앙에 정렬하려면 변환 속성을 활용하세요.

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

이 방법은 div의 위치를 ​​가장 왼쪽 모서리에서 왼쪽 모서리로 효과적으로 이동합니다. center.

향상된 절대 위치 정렬:

절대 위치 div를 중앙에 맞추려고 시도하는 동안 더 나은 접근 방식이 있습니다.

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

이를 사용하면 방법을 사용하면 div는 크기나 상단 위치에 관계없이 가로와 세로 모두 중앙에 배치됩니다.

위 내용은 CSS를 사용하여 고정 및 절대 위치 Div를 정확하게 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!