web-dev-qa-db-ja.com

ページが上下にスクロールする場合でも、画面の中央に「div」を中央に配置しますか？

ページにはボタンがあり、クリックすると画面の中央に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を表示する方法を知りたいです。

htmlcssscrollpositioncentering
115
tanya

position属性をfixedではなくabsoluteに変更します。

175
BraedenP

position:absolute;をposition:fixed;に変更します

30
Richard JP Le Guen

Quote：画面の中央にdivを表示する方法、ユーザーが上下にスクロールしたかどうかを知りたい。

変化する

position: absolute;

に

position: fixed;

position: absolute および position: fixed 。のW3C仕様

16
Sparky

固定寸法を持っていなくても、画面の中央にボックスを中央に配置する新しいトリックを見つけました。幅60％/高さ60％のボックスが必要だとしましょう。中央に配置する方法は、2つのボックスを作成することです。左に位置する「コンテナー」ボックス：50％上：50％、および左に位置を逆にする「テキスト」ボックス：-50％。トップ：-50％;

それは動作し、クロスブラウザ互換です。

以下のコードをチェックしてください。おそらくより良い説明が得られます：

<div id="message">
    <div class="container"><div class="text">
        <h2>Warning</h2>
        <p>The message</p>
        <p class="close"><a href="#">Close Window</a></p>
    </div></div>
    <div class="bg"></div>
</div>

<style type="text/css">
html, body{ min-height: 100%; }
#message{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; }
#message .container{ height: 60%; left: 50%; position: absolute; top: 50%; z-index: 10; width: 60%; }
#message .container .text{ background: #fff; height: 100%; left: -50%; position: absolute; top: -50%; width: 100%; }
#message .bg{ background: rgba(0,0,0,0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
</style>

<script type="text/javascript">
jQuery('.close a, .bg', '#message').on('click', function(){
    jQuery('#message').fadeOut();
    return false;
});
</script>

わーい！

5
SequenceDigitale.com

正しい方法は

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}
4
Sakthi Karthik