css center pop timbul pada skrin, berfungsi pada komputer dan tablet tetapi tidak pada telefon

Question

Cuba gunakan CSS untuk memaparkan pop timbul bantuan di tengah-tengah skrin. Pada komputer dan ipad saya ia berfungsi dengan baik, tetapi pada iPhone pop timbul dipusatkan secara menegak dalam keseluruhan ruang menegak yang boleh ditatal, yang bermaksud kadangkala saya perlu menatal ke atas atau ke bawah untuk melihatnya. Saya mahu ia dipusatkan pada skrin yang kelihatan pada masa ini apabila dipanggil. (Perhatikan bahawa ketinggian halaman tidak statik, iaitu berkembang dan mengecut berdasarkan aktiviti pengguna).

Ini CSS yang berkaitan:

  .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

Anda ada beberapa soalan.

1. Anda mesti menentukan ketinggian, jika tidak, ia akan berkembang dengan kandungan dan anda mungkin akan mendapat lebih banyak kandungan daripada ruang menegak yang tersedia. Anda perlu menggunakan overflow:hidden untuk menyembunyikan limpahan.

2. Anda tidak benar-benar memusatkan tingkap. Jika anda ingin melakukan ini, saya cadangkan anda menukar fokus. Untuk menjadikan elemen menduduki semua tetingkap yang tersedia, berikannya display: flex 并使用 align-items 和 justify-content untuk memusatkannya.

Contohnya.

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

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

3. Anda sudah mempunyai label interaktif yang direka khusus untuk tugasan ini:
   .