css 在屏幕上居中弹出窗口，适用于计算机和平板电脑，但不适用于手机

Question

尝试使用 CSS 在屏幕中央显示帮助弹出窗口。在我的电脑和 ipad 上，它工作正常，但在 iPhone 上，弹出窗口在整个可滚动垂直空间内垂直居中，这意味着我有时必须向上或向下滚动才能看到它。我希望它在调用时位于当前可见屏幕的中心。 （请注意，页面高度不是静态的，即根据用户活动而增大和缩小）。

这是相关的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 将其居中。

一个例子。

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

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

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