'왼쪽: 50%'가 올바르게 작동하는데 '위쪽: 50%'가 내 요소를 수직으로 가운데에 배치하지 않는 이유는 무엇입니까?

CSS top 백분율이 예상대로 작동하지 않음: 이유 탐구

반응형 레이아웃을 추구하다가 "top :50%"는 예상대로 작동하지 않지만 "left:50%"는 문제 없이 작동합니다. 왜 이런 일이 발생합니까?

동작을 이해하려면 다음 상위 및 하위 요소 구조를 고려하십시오.

<div>

문제 해결의 핵심은 "top" 속성이 어떻게 작동하는지 이해하는 데 있습니다. CSS. "50%"와 같은 백분율을 지정하면 상위 컨테이너의 높이를 기준으로 계산됩니다. 그러나 이 시나리오에서는 상위 컨테이너에 명시적으로 높이가 정의되어 있지 않으므로 "top" 속성은 알 수 없는 값에 대해 효과적으로 계산됩니다.

이 문제를 해결하려면 상위 컨테이너에 대해 고정 높이를 설정해야 합니다. . 이는 하위 요소의 상단 위치에 필요한 참조 지점을 제공합니다.

예 1: 높이 정의

<div>

상위 요소에 200px의 높이를 제공합니다. div의 경우 하위 div의 상단 위치가 이제 200px의 50%로 올바르게 계산되어 예상되는 수직 위치가 됩니다.

예 2: 컨테이너 늘리기

대체 접근 방식은 사용 가능한 전체 공간을 차지하도록 상위 컨테이너를 늘리는 것입니다.

<div>

컨테이너의 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 정의하면 사용 가능한 공간을 채울 수 있도록 확장됩니다. 그런 다음 확장된 컨테이너를 기준으로 하위 div의 상단 위치가 계산되어 동일한 센터링 효과를 얻을 수 있습니다.

위 내용은 '왼쪽: 50%'가 올바르게 작동하는데 '위쪽: 50%'가 내 요소를 수직으로 가운데에 배치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!