ACTUAL画面の中央にdiv要素を配置する方法は？（JQuery）

div要素を画面の中央に配置する必要があります。私は以下の簡単なコードを見つけましたが、私は実際の画面の中心ではなく、ページの "全高/ 2"を必要としています！ACTUAL画面の中央にdiv要素を配置する方法は？（JQuery）

実際の画面ではなく要素を中心とするJqueryコードです。

jQuery.fn.center = function() { 
this.css("position","absolute"); 
this.css("top", ($(window).height() - this.height())/2+$(window).scrollTop() + "px"); 
this.css("left", ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"); 
return this;}

私が言ったように、私は（自分のブラウザをリサイズどんなユーザー* 768 1366等）は実際の画面サイズを計算し、画面の中央に素子を配置する必要があります。だから、もし私がページを下にスクロールすると、常に中央のdivが中心に来るはずです。

var width=$("#div").css("width"); 
var half=width/2; 
$("#div").css("marginLeft","-"+half+"px");

変更があなたのセレクターで#div：THIS

出典

2013-02-26 Said Bahadır Kaya

[この回答]（http://stackoverflow.com/questions/504052/determining-position-of-the-browser-window-in-javascript）を使用すると、正しい方向に進むことができます。それはかなり古いスレッドなので、さまざまなブラウザに必要なさまざまな呼び出しをまとめた素敵なライブラリがあることを確信しています。 – Matthew

@Matt IEがscreenXとscreenYを受け入れるというコメントがありました。今ではクロスブラウザと互換性があります。 :) –

をそのCSSスタイルを与える#sample

としてこのダイビングにそれをworks..take absoluteの場合は、次のようなものを使用できます。

jQuery.fn.center = function() 
{ 
    this.css("position","fixed"); 
    this.css("top", ($(window).height()/2) - (this.outerHeight()/2)); 
    this.css("left", ($(window).width()/2) - (this.outerWidth()/2)); 
    return this; 
} 

$('#myDiv').center(); 
$(window).resize(function(){ 
    $('#myDiv').center(); 
});

デモ：http://jsfiddle.net/GoranMottram/D4BwA/1/

出典

2013-02-26 13:57:00

これは私の問題を修正しました、ありがとう！ –

TRY。

出典

2013-02-26 13:40:44

もう一度...注意深く読んでみると、質問はVERTICALのセンタリングに関するもので、HORIZONTALのセンタリングを提案しています。 – Havok

それは

#sample{ 
margin-left:auto; 
margin-right:auto; 
width:200px;//your wish 
}

はそれがうまくいくと思うとあなたがfixedポジショニングを使用して代わりにして大丈夫なら...

出典

2013-02-26 13:41:35 sasi

注意深く読んだ場合、質問はVERTICALのセンタリングに関するもので、HORIZONTALのセンタリングを提案しています。 – Havok

固定要素で動作しません –

ACTUAL画面の中央にdiv要素を配置する方法は？ （JQuery）

答えて

関連する問題

ACTUAL画面の中央にdiv要素を配置する方法は？（JQuery）