使用子div的位置，这样它将显示exaclty水平和垂直中心。

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid red 2px;
  width: 700px;
  height: 700px;
}

#favDialog {
  display: flex;
  width: 200px;
  height: 200px;
  position: absolute;
  background: #eee;
  border: 1px solid #000;
  text-align: center;
  padding: 20px;

  
}

<!-- A modal dialog containing a form -->
<p>
  <button id="showDialog">Show the dialog</button>
</p>

<div class="container">
  <p> Dolore commodo cupidatat excepteur tempor irure amet aliquip amet commodo in ipsum ut ipsum occaecat.</p>
  <dialog id="favDialog">
    <h3>Title</h3>
    <p>Dolore fugiat aliquip sint dolor elit dolore labore.</p>
    <p>Labore incididunt id laborum occaecat.</p>

  </dialog>
</div>

您可以通过为父元素指定相对位置和子元素指定绝对位置来限制元素的定位。示例：

<div class="container">
    <div id="favDialog"></div>
</div>

.container {
    position: relative;
}

#favDiolog {
    position: absolute;
}

这将防止子元素进入父元素之外，因为它使子元素的位置依赖于父元素而不是主体。如果你想了解更多信息，我会从这里开始：https://css-tricks.com/absolute-positioning-inside-relative-positioning/

我做了响应弹出对话框。我从容器中删除id=“favDialog”，并与其他内容保持分离。你也可以在其他页面使用。

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const closeDialog = document.getElementById("closeDialog");
            
// open dialog
showButton.addEventListener("click", () => {
  favDialog.style.display = "flex";
});
            
// close Dialog
closeDialog.addEventListener("click", () => {
  favDialog.style.display = "none";
});

// Close on click of outside of dialog
favDialog.addEventListener("click", (e) => {
  if(e.target === e.currentTarget) { 
    favDialog.style.display = "none";; 
  } 
});

body{
                position: relative;
                height: 100vh;
                margin: auto;
            }
            .container {
              border: 2px solid red;
            }
            
            .popup-overlay { 
                width: 100%; 
                height: auto; 
                position: absolute; 
                left:0%;
                top:0%;
                bottom:0%;
                right:0%;
                background: rgba(0, 0, 0, 0.7); 
                display:none;
                justify-content: center;
                align-items: center;
            }
            
            .popup {
                width: 100%;
                max-width:480px;
                height: 200px;
                position: absolute;
                background: #ffffff;
                border: 1px solid #000;
                text-align: center;
                padding: 20px;
            }

<!-- A modal dialog containing a form -->
        <p>
          <button id="showDialog">Show the dialog</button>
        </p>

        <div class="container">
          <p> Dolore commodo cupidatat excepteur tempor irure amet aliquip amet commodo in ipsum ut ipsum occaecat.</p>
        </div>
        
         
        <div class="popup-overlay"id="favDialog">
            <div class="popup" >
                <div class="popup-header">
                    <h3>Title</h3>
                </div>
                <div class="popup-body">
                    <p>Dolore fugiat aliquip sint dolor elit dolore labore.</p>
                    <p>Labore incididunt id laborum occaecat.</p>
                </div>
                <div class="popup-footer">
                    <button id="closeDialog">Close</button>
                </div>
            </div>
        <div>