デッド・センタリング・ディビジョン

Question

ディビジョンをページではなく画面に対して水平方向と垂直方向にどのようにセンタリングすることが可能ですか？ユーザーが長いページをスクロールすると、divは水平方向と垂直方向の中央に維持されます。 <div>ため

Answer 1

ここでは、純粋なCSSソリューションですが、パーセンテージとマイナスマージンに注意してください。ここで

http://jsfiddle.net/R7Xy2/

div { 
    position: fixed; 
    width: 200px; 
    height: 200px; 
    top: 50%; 
    left: 50%; 
    margin-left: -100px; 
    margin-top: -100px; 
} 

Answer 2

CSS：<div>上のjQueryを使用して、上記設定し

position: absolute 
left : (centerofpagepixel.x - (width of div /2)); 
top : (centerofpagepixel.y - (height of div/2)); 

。

もう一度jQueryを使用してcenterofpagepixel.xとyを計算することができます。おそらく、画面の幅/高さを取得し、2

Answer 3

によってそれらを分けるまた、次を試してください：

HTMLマークアップ：

<div class="classname">text here</div> 

CSS：

.classname { 
    position:absolute; 
    left:50%; 
    top:50%; 
    padding:10px; 
    border:1px solid #ccc; 
} 

ボーダーおよびパディングは、要件に基づいて変更または削除することができます。また、親コンテナを相対的に配置する必要があります。つまり、position:relativeである必要があります。

Answer 4

あなたのコードは、ちょうどwindow.onscrollこのイベントを添付し

http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/

です。あなたはスクロールしながら垂直方向の中央に何をjQueryのを使用する必要、この

function addEvent(obj,ev,fn) { 
    if(obj.addEventListener) obj.addEventListener(ev,fn,false); 
    else if(obj.attachEvent) obj.attachEvent("on"+ev,fn); 
} 

addEvent(window,"scroll",yourfunction); 

幸運