CSS를 사용하여 고정 위치 Div를 중앙에 어떻게 배치합니까?

고정 위치 div를 중앙에 배치

고정 위치 div로 작업할 때 페이지 중앙에 정렬하는 것이 어려울 수 있습니다. 절대 위치에 있는 요소에 사용되는 전통적인 "해킹"은 적용되지 않습니다. 대신 div의 가장 왼쪽 모서리는 왼쪽 여백을 무시하고 50%에 배치됩니다.

CSS3 변환을 사용한 솔루션

해결책은 CSS3 변환 속성을 사용하는 데 있습니다.

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

이 방법은 변환 속성을 사용하여 요소를 너비의 절반만큼 왼쪽으로 이동하여 효과적으로 요소의 중앙에 배치합니다. page.

보너스: 절대 위치 요소를 중앙에 배치

절대 위치 요소의 경우 왼쪽 여백 "해킹"보다 더 나은 방법은 CSS3 flexbox를 사용하는 것입니다.

.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

이것은 절대 위치에 있는 요소의 내용을 center.

예

차이점을 보여주는 예는 다음과 같습니다.

<div class="almost-centered">I'm almost centered DIV lorem ipmsum</div>

<div class="centered">I'm exactly centered DIV using CSS3</div>

"거의 중앙" div는 왼쪽 여백 "해킹"을 사용하는 반면 "centered" div는 CSS3 변환 속성을 사용합니다. 보시다시피 "centered" div는 정확히 중앙에 위치합니다.

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