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


126

私のページには、クリックすると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 left: 50%; top: 50%動きがトップはコーナーの左のを.PopupPanel画面の中央に。次に、幅と高さの半分を中央に戻します。css-tricks.comのセンタリングを
kub1x

回答:


189

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


2
ポップアップdivと画面よりも大きいdivをスクロールする必要がある場合はどうでしょうか。
ダークバー

これは最も応答性の高いソリューションではないことを頭に入れておいてください(ただし、上記の問題に対する完璧なソリューションです)。getbootstrap.com/javascript/#modalsを確認し、DevToolsを調べて、ポップアップ/モーダルの操作に関する素晴らしいアイデアを入手してください。
Cas Bloem


17

引用:ユーザーが上下にスクロールしたかどうかに関係なく、画面の中央にdivを表示する方法を教えてください。

変化する

position: absolute;

position: fixed;

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


6

サイズを固定していない場合でも、画面の中央にボックスを中央に配置する新しいトリックを見つけました。たとえば、幅60%/高さ60%のボックスが必要だとします。中央に配置する方法は、2つのボックスを作成することです。左に配置する「コンテナ」ボックス:50%上:50%、および逆の位置に左に配置する「テキスト」ボックス:-50%; 上:-50%;

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

以下のコードを確認してください。おそらくより良い説明が得られます。

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>


4

正しい方法は

.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;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.