CSS-Center-Popup auf dem Bildschirm, funktioniert auf Computern und Tablets, aber nicht auf Telefonen

Question

Versuchen Sie, mithilfe von CSS ein Hilfe-Popup in der Mitte des Bildschirms anzuzeigen. Auf meinem Computer und meinem iPad funktioniert es einwandfrei, aber auf dem iPhone ist das Popup vertikal zentriert innerhalb des gesamten scrollbaren vertikalen Raums, was bedeutet, dass ich manchmal nach oben oder unten scrollen muss, um es zu sehen. Ich möchte, dass es beim Aufruf zentriert auf dem aktuell sichtbaren Bildschirm angezeigt wird. (Beachten Sie, dass die Seitenhöhe nicht statisch ist, d. h. je nach Benutzeraktivität wächst und schrumpft.)

Dies ist das relevante CSS:

  .helpcontent {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: khaki;
    width: 500px;
    max-width: 80%;
    padding: 10px 15px;
  }

<div class="helpcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

您有几个问题。

1. 您必须定义一个高度，否则它会随着内容而增长，并且可能会出现内容多于垂直可用空间的情况。您必须使用overflow:hidden来隐藏溢出。

2. 您并没有真正将窗口居中。如果你想这样做，我建议你改变焦点。让一个元素占据所有可用窗口，给它一个 display: flex 并使用 align-items 和 justify-content 将其居中。 p>

一个例子。

.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
}

.modal__content {
    width: 10rem;
    height: 10rem;
    border: 1px solid black;
}

3. 您已经有一个专为该任务设计的交互式标签：
   。