web-dev-qa-db-ja.com

divを表示領域の中央に配置する

メーリングリストのサインアップのためにライトボックススタイルのポップアップを作成している最中ですが、ポップアップをドキュメント全体の中央だけでなく、表示されているページの中央にも配置したいと考えています。ユーザーがページの一番下までスクロールし、クリックしてサインアップすると、画面の中央に表示されます。

私は、jQuery/JSがこれを行うための最良の方法になると想定しています。これがかなりうまく機能する私の現在のCSSコードですが、小さな画面の場合、divを表示スペースに動的にプッシュする必要があります。

.my-div{
    width:960px;
    height:540px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:60;
    display:none;
}
javascriptjquerycentering
22
mmmoustache

あなたは近かった！ CSSだけで実行できます。

使用する position: fixed の代わりに position: absolute。

固定はビューポートを指し、絶対はドキュメントを指します。 それについてすべて読んでください！

40
Madara's Ghost
var w = $(window).width();
var h = $(window).height();
var d = document.getElementById('my-div');
var divW = $(d).width();
var divH = $(d).height();

d.style.position="absolute";
d.style.top = (h/2)-(divH/2)+"px";
d.style.left = (w/2)-(divW/2)+"px";
9
Lahiru Ashan

私はこれで問題が解決しないことを知っていますが、それは良い参照と出発点です： ブラウザウィンドウの中央にdivを配置する方法

画面中央にDivを正確に配置

<!DOCTYPE html> 
  <html > 
    <head> 
      <style type="text/css"> 
        .exactCenter { 
           width:200px; 
           height:200px; 
           position: fixed; 
           background-color: #00FF00; 
           top: 50%; 
           left: 50%; 
           margin-top: -100px; 
           margin-left: -100px; 
        } 
      </style> 
    </head> 
    <body> 
      <div class="exactCenter"> </div> 
    </body> 
  </html>

JSFiddle here および here

5
Adrian P.

jQueryを使って：

var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});
3
André Alçada Padez

受け入れられる回答 が最適ですが、divs positionをfixedに設定できない場合は、この純粋なJavaScriptソリューションを使用できます。

var myElement = document.getElementById('my-div'),
    pageWidth = window.innerWidth,
    pageHeight = window.innerHeight,
    myElementWidth = myElement.offsetWidth,
    myElementHeight = myElement.offsetHeight;

myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";

JSFiddle

またはより凝縮されたバージョン：

var w = window,
    elem = document.getElementById('my-div');

elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';

この回答は Lahiru Ashan's 回答のバニラJavaScriptバージョンです。

2
Jessica