반응형 레이아웃에서 'top: 50%'가 요소 중앙에 올바르게 배치되지 않는 이유는 무엇입니까?

CSS "top: 50%"가 반응형 레이아웃에서 예상대로 작동하지 않는 이유는 무엇입니까?

반응형 웹 디자인에서 CSS에 백분율 사용 "top"과 같은 속성은 다양한 화면 크기에서 요소 위치를 유지하는 데 중요합니다. 그러나 "top: 50%"가 요소를 올바르게 정렬하지 않으면 문제가 발생할 수 있습니다.

다음 HTML 및 CSS 코드를 고려하세요.

<div>
<p>여기서 문제는 "top: 50%"가 "top: 50%"라는 것입니다. 하위 div의 " 속성은 정의되지 않은 상위 ​​div의 높이를 참조합니다. 결과적으로 하위 div는 뷰포트 상단에서 50% 위치에 배치되지 않습니다.</p>
<p>이 문제를 해결하려면 상위 div의 특정 높이를 정의해야 합니다. 예:</p>
<pre class="brush:php;toolbar:false"><div>
<p>이제 하위 div는 높이가 정의된 상위 div 상단에서 50% 위치에 배치됩니다.</p>
<p>또는 상위 div를 늘릴 수도 있습니다. div를 사용하여 "상단", "하단", "왼쪽" 및 "오른쪽" 속성을 설정하여 전체 뷰포트를 채웁니다.</p>
<pre class="brush:php;toolbar:false"><div><p>상위 div의 크기를 정의하거나 뷰포트를 채우기 위해 늘려서, 반응형 레이아웃에서 "상위: 50%"와 같은 백분율이 요소를 올바르게 정렬할 수 있는지 확인하세요.</p></div>