css to center a popup on the screen, works on computer and tablet, but not phone

Trying to display a help popup in the center of the screen, using css. On my computer and ipad, it works fine, but on 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 centered within the currently visible screen at the time it is invoked. (Note the page height is not static, i.e. grows and shrinks based on user activity).

Here is the relvant css:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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;
  }

<!-- language: lang-html -->

<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>

<!-- end snippet -->

You have several problems.

1. You must define a height, otherwise it will grow with the content, and it may happen that you have more content than space available vertically. You will have to use overflow: hidden to hide the overflow.

2. You are not really centering the window. If you want to do it I recommend you to change the focus. Make an element occupy all the available window, give it a display: flex and center it with align-items and justify-content.

An example.

<section class="modal">
    <div class="modal__content">
        <!-- Div that will be centered on the screen and will contain all your content. -->
    </div>
</section>

.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 that is designed for the task: <dialog>.