ACTUAL स्क्रीन के केंद्र में एक div तत्व कैसे स्थापित करें? (JQuery)

Question

मुझे स्क्रीन के केंद्र में एक div तत्व की स्थिति की आवश्यकता है। मुझे नीचे एक साधारण कोड मिला, लेकिन मुझे पृष्ठ की "कुल ऊंचाई/2" नहीं, बल्कि वास्तविक स्क्रीन का केंद्र चाहिए!

यहां 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;} 

जैसा कि मैंने कहा, मैं वास्तविक स्क्रीन आकार (1366 * 768 या जो कुछ भी की तरह उपयोगकर्ताओं द्वारा अपना ब्राउज़र आकार दिया) की गणना करने और स्क्रीन के केंद्र में तत्व की स्थिति की जरूरत है। इसलिए, यदि मैं पृष्ठ को स्क्रॉल करता हूं, तो हमेशा केंद्रित div केंद्र में होना चाहिए। अपने चयनकर्ता के साथ

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

#div बदलें:

Answer 1

आप के बजाय fixed स्थिति का उपयोग कर के साथ ठीक कर रहे हैं 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/

Answer 2

आज़माएं।

Answer 3

यह इस गोता यह #sample

रूप works..take अपने सीएसएस शैली देने के रूप में

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

यह काम करता है लगता है ..