画面上の CSS センター ポップアップ。コンピューターやタブレットでは機能しますが、携帯電話では機能しません

Question

CSS を使用して、画面中央にヘルプ ポップアップを表示してみます。私のコンピュータと iPad では問題なく動作しますが、iPhone ではポップアップがスクロール可能な垂直方向のスペース全体の垂直方向の中央に配置されるため、表示するために時々上下にスクロールする必要があります。呼び出されたときに、現在表示されている画面の中央に配置したいと考えています。 (ページの高さは静的ではないことに注意してください。つまり、ユーザーのアクティビティに基づいて伸びたり縮んだりします)。

これは関連する CSS です:

リーリー リーリー

Answer 1

いくつか質問があります。

1. 高さを定義する必要があります。定義しないと、コンテンツとともに高さが大きくなり、利用可能な垂直方向のスペースよりも多くのコンテンツが存在する状況が発生する可能性があります。オーバーフローを非表示にするには、overflow:hidden を使用する必要があります。

2. ウィンドウを実際には中央に配置していません。これを実行したい場合は、焦点を変更することをお勧めします。要素に使用可能なすべてのウィンドウを占有させるには、要素に display: flex を指定し、align-items と justify-content を使用して中央に配置します。

一例です。

リーリー リーリー

3. このタスク専用に設計された対話型タグがすでにあります:
   。