私のページには、クリックするとdiv
画面の中央に(ポップアップスタイル)を表示するボタンがあります。
次のCSSを使用してdiv
、画面の中央にを配置しています。
.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
このCSSは、ページが下にスクロールされない限り正常に機能します。
しかし、ページの下部にボタンを配置すると、ボタンをクリックdiv
すると上部に表示され、ユーザーは上にスクロールしてのコンテンツを表示する必要がありdiv
ます。
div
ページがスクロールされている場合でも、画面中央にを表示する方法を教えてください。
質問質問。margin-top:(200)とmargin-leftを差し引くのはなぜですか。これは高さと幅の中間だと思いますが、絶対的な中心を取得するためになぜそれをしなければならないのですか?左50%と上50%はトリックを行うべきではありませんか?
—
jmoon90 2016
@ jmoon90
—
kub1x
left: 50%; top: 50%
動きがトップはコーナーの左のを.PopupPanel
画面の中央に。次に、幅と高さの半分を中央に戻します。css-tricks.comのセンタリングを