divをスクロール可能なページの中央に表示しようとしています - 私のコードのバグ？

Question

私が明確であることを確認するための序文と同じように、私はdivがページの真ん中に死んでいるように見せたくありません。私はそれを表示可能なウィンドウの中央にします。だから、長いページを想像して、ユーザーが一番下までスクロールしてボタンをクリックすると、divの部分が画面の中央付近に表示されます。ここ

はクロームでは動作しません。私のコードです：

   function centerdiv() { 
var scrolledX, scrolledY; 

scrolledX = document.body.scrollLeft; 
scrolledY = document.body.scrolltop; 

var centerX, centerY; 
centerX = document.body.clientWidth; 
centerY = document.body.clientHeight; 

var leftoffset = scrolledX + (centerX - 100)/2; 
var topoffset = scrolledY + (centerY - 100)/2; 

$('.current div[name="popup"]').css({'top' : topoffset + 'px', 'left': 
leftoffset + 'px'});} 


      $(function() { 
     $("html").ajaxStart(function() { 
      centerdiv(); 
      $(".current div[name=popup]").show(); 
     }); 
     $("html").ajaxComplete(function() { 
      $(".current div[name=popup]").hide(); 
     }); 
    }); 

注、これはiPhoneのモバイルウェブサイトのためのものであり、それが動作しないようにHTMLに取り付けajaxstart機能は非常に重要です私のウェブサイト上の他の方法でiphone。ここで

Answer 1

あなたは固定位置への絶対、またはを設定するのを忘れ

$（ '現在のdiv [名= "ポップアップ"]。 '）、CSS（{' トップ'：。topoffset + ' PX」、 '左'： leftoffset + 'ピクセル'、 '位置'： '絶対'}）;}

Answer 2

が正常に動作します私のソリューションです：

var winH = $(window).height(); 
    var winW = $(window).width(); 
    $(this).css('top', winH/2 - $(this).height()/2); 
    $(this).css('left', winW/2 - $(this).width()/2); 
    $(this).show(); 

$（この）あなたが中央に表示したいDIV要素を参照する必要があります。

Answer 3

wh = $(window).height(); 
dh = $("#div").height(); 
$("#div").css("top",(wh - dh)/ 2 + $(window).scrollTop() + 'px'); 

編集：

ww = $(width).width(); 
dw = $("#div").width(); 
$("#div").css("left",(ww - dw)/ 2 + 'px'); 

しかし、それは本当にあなたが固定されたビューポートを持っているか、いない場合は、それを中央にするための多くの方法がある依存...

：幅について 同じではありません、それは実際にあります

幸運！

Answer 4

あなたは水平方向のスクロールを持っていない場合は、部分的にまっすぐCSSで のdiv { 左にそれを行うことができます：50％; margin-left： - [ボックス幅/ 2] px; }