CSS `top: 50%`가 항상 요소를 중앙에 배치하지 않는 이유는 무엇입니까?

CSS 상위 백분율이 예상대로 정렬되지 않음

반응형 CSS 레이아웃에서 백분율을 사용하여 상위 속성을 설정하면 때때로 예기치 않게 작동할 수 있지만 왼쪽 속성은 의도한 대로 작동합니다. 이는 상위 컨테이너의 크기와 관련하여 백분율이 계산되는 방식 때문입니다.

상대 위치 이해

절대적으로 배치된 요소에 대해 위쪽 또는 왼쪽 백분율을 설정할 때 상위 컨테이너의 높이 및/또는 너비를 정의하는 것이 중요합니다. 이는 백분율이 상위 요소의 차원을 기반으로 계산되기 때문입니다.

해결책: 상위 컨테이너 차원 정의

top:50%가 예상대로 작동하도록 하려면, 상위 컨테이너의 높이를 지정해야 합니다. 이를 통해 브라우저는 컨테이너의 중간점을 정확하게 계산하고 그에 따라 하위 요소를 배치할 수 있습니다.

예를 들어 상위 컨테이너를 다음과 같이 정의하면

<div>

그런 다음 하위 요소는 상단:50%인 요소;

대체 솔루션: 상위 컨테이너 늘리기

또 다른 옵션은 다음을 사용하여 상위 컨테이너를 늘려 포함 공간을 채우는 것입니다. 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성입니다. 또한 이 방법을 사용하면 top:50% 속성이 하위 요소를 중앙에 정렬할 수 있습니다.

<div>

명확한 크기를 제공하거나 상위 컨테이너를 늘림으로써 top:50%가 반응형에 대해 올바르게 작동하는지 확인할 수 있습니다. CSS 레이아웃을 사용하면 하위 요소의 정확한 위치를 지정할 수 있습니다.

위 내용은 CSS `top: 50%`가 항상 요소를 중앙에 배치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!