HTML - モバイル端末で CSS を使用して、ポップアップ ウィンドウを水平方向と垂直方向のパーセンテージ レイアウトで中央に配置する方法_html/css_WEB-ITnose

PC側でポップアップウィンドウを水平方向と垂直方向の中央に配置する ポップアップウィンドウの幅と高さがわかっていれば、次のCSSを使用するだけで簡単に計算できます。モバイル側でパーセンテージレイアウトを書くと、高さが決まりにくいため、ポップアップウィンドウを中央に配置するのが難しくなります。今日、Baiduで検索してこの友人の情報を見ました。 ://www.shejidaren.com/centering-percentage-widhtheight -layout.html)、この友人の CSS コードは次のとおりです:

#date{    width: 300px;    height: 300px;    position: absolute;    top: 50%;    left: 50%;    margin-left: -150px;    margin-top: -150px;}

試してみると、目的の効果が得られますが、確信が持てない場合は、高さについては、height: 30% を削除し、高さの値を設定しないと、ポップアップ ウィンドウが独自のコンテンツに従って垂直方向の中央に配置されることがわかります。

.center{    width:50%;    height:30%;    position: absolute;    top: 50%;    left: 50%;    -moz-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);}

効果は次のとおりです (ポップアップ ウィンドウの部分は灰色の背景領域です):

これはうまく機能します。ポップアップ ウィンドウの効果は、水平方向と垂直方向の両方で中央に配置されます。また、私の問題を解決してくれたこの友人に感謝します~~