css center popup on screen, works on computers and tablets but not on phones

Question

Try using CSS to display a help popup in the center of the screen. On my computer and ipad it works fine, but on the iPhone the popup is vertically centered within the entire scrollable vertical space, which means I sometimes have to scroll up or down to see it. I want it to be centered on the currently visible screen when called. (Note that page height is not static, i.e. grows and shrinks based on user activity).

This is the relevant 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

You have several questions.

1. You must define a height, otherwise it will grow with the content and there may be a situation where there is more content than the vertical space available. You must use overflow:hidden to hide overflow.

2. You don't really center the window. If you want to do this, I suggest you change the focus. To have an element occupy all available windows, give it a display: flex and center it using align-items and justify-content. p>

one example.

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

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

3. You already have an interactive tag designed specifically for this task:
   .