화면의 CSS 센터 팝업은 컴퓨터와 태블릿에서는 작동하지만 휴대폰에서는 작동하지 않습니다.

Question

CSS를 사용하여 화면 중앙에 도움말 팝업을 표시해 보세요. 내 컴퓨터와 ipad에서는 잘 작동하지만 iPhone에서는 팝업이 스크롤 가능한 전체 수직 공간 내에서 수직 중앙에 위치하므로 가끔 팝업을 보려면 위나 아래로 스크롤해야 합니다. 호출할 때 현재 보이는 화면의 중앙에 위치하도록 하고 싶습니다. (페이지 높이는 정적이지 않습니다. 즉, 사용자 활동에 따라 늘어나고 줄어듭니다.)

관련 CSS는 다음과 같습니다.

으아아아 으아아아

P粉337385922 · Answer

몇 가지 질문이 있습니다.

높이를 정의해야 합니다. 그렇지 않으면 콘텐츠와 함께 높이가 늘어나 사용 가능한 수직 공간보다 더 많은 콘텐츠가 생길 수 있습니다. 오버플로를 숨기려면 overflow:hidden를 사용해야 합니다.
창을 중앙에 맞추지 마세요. 이렇게 하고 싶다면 초점을 바꾸는 것이 좋습니다. 요소가 사용 가능한 모든 창을 차지하도록 하려면 display: flex 并使用 align-items 和 justify-content를 사용하여 중앙에 배치하세요. p>