페이지가 위아래로 스크롤 되더라도 화면 중앙에 'div'를 배치 하시겠습니까?

내 페이지에 클릭하면 div내 화면 중앙에 (팝업 스타일)이 표시되는 버튼이 있습니다.

다음 CSS를 사용 div하여 화면 중앙을 중앙에 배치합니다.

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

이 CSS는 페이지가 아래로 스크롤되지 않는 한 잘 작동합니다.

하지만 내 페이지 하단에 버튼을 놓으면 클릭하면 div상단에가 표시되며 사용자는 div.

div페이지를 스크롤 한 경우에도 화면 중앙에 표시하는 방법을 알고 싶습니다 .

대신 position속성을로 변경하십시오 .fixedabsolute

변경 position:absolute;에position:fixed;

인용구 : 사용자가 위 / 아래로 스크롤했는지 여부에 관계없이 화면 중앙에 div를 표시하는 방법을 알고 싶습니다.

변화

position: absolute;

에

position: fixed;

W3C 사양 position: absolute및 position: fixed.

크기가 고정되어 있지 않아도 화면 중앙에 상자를 중앙에 배치하는 새로운 방법을 찾았습니다. 너비 60 % / 높이 60 % 상자를 원한다고 가정 해 보겠습니다. 중앙에 배치하는 방법은 2 개의 상자를 만드는 것입니다. 왼쪽에있는 "컨테이너"상자 : 50 % 위쪽 : 50 %, 그리고 반대 위치가 왼쪽에있는 "텍스트"상자 : -50 %; 상단 : -50 %;

작동하며 크로스 브라우저와 호환됩니다.

아래 코드를 확인하면 더 나은 설명을 얻을 수 있습니다.

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});

html, body {
  min-height: 100%;
}

#message {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#message .container {
  height: 60%;
  left: 50%;
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 60%;
}

#message .container .text {
  background: #fff;
  height: 100%;
  left: -50%;
  position: absolute;
  top: -50%;
  width: 100%;
}

#message .bg {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message">
  <div class="container">
    <div class="text">
      <h2>Warning</h2>
      <p>The message</p>
      <p class="close"><a href="#">Close Window</a></p>
    </div>
  </div>
  <div class="bg"></div>
</div>

올바른 방법은

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}