760

मैं <div>jQuery का उपयोग करके स्क्रीन के केंद्र में एक के बारे में कैसे जाना है ?

20

यह एक jQuery प्रश्न की तुलना में CSS प्रश्न से अधिक है। आप क्रॉस-ब्राउज़र पोज़िशनिंग को खोजने और एक तत्व के लिए उचित सीएसएस शैलियों को लागू करने में मदद करने के लिए jQuery के तरीकों का उपयोग कर सकते हैं, लेकिन सवाल का सार यह है कि सीएसएस का उपयोग करके स्क्रीन पर एक div कैसे केंद्र किया जाए।

— क्रिस मैकडोनाल्ड

यहाँ एक और प्लगइन है। alexandremagno.net/jquery/plugins/center

— Ivailo Bardarov

2

यदि आप स्क्रीन पर एक div केंद्रित कर रहे हैं, तो आप FIXED स्थिति का उपयोग कर सकते हैं। ऐसा क्यों नहीं करते: stackoverflow.com/questions/2005954/… । समाधान शुद्ध सीएसएस है, जावास्क्रिप्ट की आवश्यकता नहीं है।

— अर्ध अराम

सहमत, जावास्क्रिप्ट विधि बिल्कुल भी अनुकूल नहीं है। खासकर क्रॉस ब्राउजर।

— सिमोन हैटर

1070

मुझे jQuery में फ़ंक्शंस जोड़ना पसंद है इसलिए यह फ़ंक्शन मदद करेगा:

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

अब हम लिख सकते हैं:

$(element).center();

डेमो: फिडेल (अतिरिक्त पैरामीटर के साथ)

— टोनी एल।
स्रोत

78

एक बदलाव जो मैं सुझाऊंगा: आपको इस.हाइट () और इस.ऑइट () के बजाय इस। रूटर () और इस.वर्टीडथ () का उपयोग करना चाहिए। अन्यथा, यदि वस्तु में एक सीमा या गद्दी है, तो यह थोड़ा केंद्र बंद हो जाएगा।

— ट्रेवर बर्नहैम

82

यह jQuery की कार्यक्षमता का मूल भाग क्यों नहीं है?

— सेठ कार्नेगी

14

क्या होगा अगर मैं <div>इसके बजाय युक्त में केंद्र करना चाहता हूं <body>? हो सकता है आप बदलना चाहिए windowकरने के लिए this.parent()या उसके लिए कोई पैरामीटर जोड़ते हैं।

— डेरेक 會會 ere

13

जवाब में कोड "स्थिति: निश्चित" का उपयोग करना चाहिए क्योंकि "पूर्ण" की गणना पहले रिश्तेदार माता-पिता से की जाती है, और केंद्र की गणना करने के लिए कोड विंडो का उपयोग करता है।

— डिएगो

2

मैं समर्थन जोड़ने का सुझाव भी दूंगा ताकि खिड़की के आकार बदलने पर यह पृष्ठ पर मौजूद तत्व को समायोजित कर ले। वर्तमान में यह मूल आयामों के साथ रहता है।

— वेबनेट

143

मैंने यहां jquery प्लगइन डाला

बहुत छोटे संस्करण

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

लघु संस्करण

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);

इस कोड द्वारा सक्रिय:

$('#mainDiv').center();

PLUGIN संस्करण

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

इस कोड द्वारा सक्रिय:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);

क्या वह सही है ?

अपडेट करें :

से सीएसएस-ट्रिक्स

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

— molokoloco
स्रोत

एक ऊर्ध्वाधर केंद्र के लिए आपका कार्य पूरी तरह से ठीक है। यह एक क्षैतिज केंद्र के लिए काम नहीं करता है।

— हमसफर

CSS मानता है कि आप केंद्रित div का आकार (प्रतिशत कम से कम) जानते हैं, जबकि jQuery जो भी काम करता है।

— डनक

मेरा वोट CSS है - बहुत अधिक सीधा और किसी भी फैंसी जावा स्क्रिप्ट की आवश्यकता नहीं है। यदि आप निरपेक्ष के बजाय निर्धारित का उपयोग करते हैं तो यह उपयोगकर्ता के ब्राउज़र विंडो को स्क्रॉल करने पर भी पृष्ठ के केंद्र में

— रहेगा

60

मैं jQueryUI स्थिति उपयोगिता की सिफारिश करूंगा

$('your-selector').position({
    of: $(window)
});

जो आपको केवल केंद्र की तुलना में बहुत अधिक संभावनाएं देता है ...

— cetnar
स्रोत

1

@ टिमी - क्या आप सुनिश्चित हैं कि आप खिड़की बनाम दस्तावेज़ पर केंद्रित हैं?

— कीथकबारथ

1

TypeError: $ (...)। स्थिति एक फ़ंक्शन नहीं है

— माइकल एंजेलो

3

@Michelangelo: आपको फ़ंक्शन के रूप में .position () का उपयोग करने के लिए jqueryUI लाइब्रेरी की आवश्यकता है। Api.jqueryui.com/position/: की जाँच करें

— जेक

वह स्निपेट सबसे अच्छा है: डी। लेकिन चेतावनी दी जानी चाहिए कि तत्व "दृश्यमान" होना चाहिए।

— C

39

यहाँ मेरा यह जाना है। मैंने अपने लाइटबॉक्स क्लोन के लिए इसका उपयोग किया। इस समाधान का मुख्य लाभ यह है कि तत्व स्वचालित रूप से केंद्रित रहेगा भले ही खिड़की को आकार बदलकर इस तरह के उपयोग के लिए आदर्श बना दिया जाए।

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

— जुहो वेपसालीन
स्रोत

3

मुझे लगता है कि यह अच्छी तरह से काम करता है ... उत्तरदायी डिजाइन का उपयोग करने के कारण यह मेरे मामले में गलत हो गया: स्क्रीन की चौड़ाई में परिवर्तन के रूप में मेरी डिव की चौड़ाई बदलती है। टोनी एल का जवाब पूरी तरह से काम करता है और फिर इसे जोड़ रहा है: $(window).resize(function(){$('#mydiv').center()}); (mydiv एक मोडल डायलॉग है, इसलिए जब इसे बंद किया जाता है, तो मैं रिसाइज इवेंट हैंडलर को हटा देता हूं।)

— डैरेन कुक

1

कभी-कभी आप उपयोग करना चाह सकते हैं outerWidth()और outerHeight()पैडिंग और बॉर्डर की चौड़ाई पर विचार कर सकते हैं ।

— फिलिप गेरबर

यह मेरे लिए पूरी तरह से काम करता है, जिसमें doc टाइप 5 के साथ विरासत परियोजना है, जहाँ $(window).height()0 देता है। लेकिन मैंने 'पूर्ण' स्थिति बदल दी है।

— मैखायलो एडमोविक

26

आप ऐसा करने के लिए अकेले सीएसएस का उपयोग कर सकते हैं:

काम करने का उदाहरण

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}

<div class="center"></div>

स्निपेट का विस्तार करें

calc() आपको सीएसएस में बुनियादी गणना करने की अनुमति देता है।

calc()ब्राउज़र समर्थन तालिका के लिए MDN प्रलेखन

— apaul
स्रोत

ध्यान रखें कि यदि आप ब्राउज़र को jquery केंद्र रणनीति का उपयोग करने की आवश्यकता है तो IE8 में कैल्क () समर्थित नहीं है।

— mbokil

14

मैं @TonyL द्वारा दिए गए शानदार जवाब पर विस्तार कर रहा हूं। मैं मूल्यों को लपेटने के लिए Math.abs () जोड़ रहा हूं, और यह भी ध्यान रखता हूं कि jQuery "नो संघर्ष" मोड में हो सकता है, उदाहरण के लिए वर्डप्रेस में।

मेरा सुझाव है कि आप ऊपर और बाएँ मान को Math.abs () के साथ लपेटें जैसा कि मैंने नीचे किया है। यदि विंडो बहुत छोटी है, और आपके मोडल डायलॉग में सबसे ऊपर एक क्लोज बॉक्स है, तो यह क्लोज बॉक्स को न देखने की समस्या को रोक देगा। टोनी के कार्य में संभावित नकारात्मक मूल्य होते। नकारात्मक मूल्यों के साथ आपका अंत कैसे होता है, इस पर एक अच्छा उदाहरण है यदि आपके पास एक बड़ा केंद्रित संवाद है, लेकिन अंतिम उपयोगकर्ता ने कई टूलबार स्थापित किए हैं और / या अपने डिफ़ॉल्ट फ़ॉन्ट को बढ़ा दिया है - इस तरह के मामले में, मोडल डायलॉग पर बंद बॉक्स (यदि शीर्ष पर) दृश्यमान और क्लिक करने योग्य नहीं हो सकता है।

दूसरी चीज जो मैं करता हूं वह $ (विंडो) ऑब्जेक्ट को कैशिंग करके इसे थोड़ा गति देता है ताकि मैं अतिरिक्त डोम ट्रैवर्सल्स को कम कर दूं, और मैं एक क्लस्टर सीएसएस का उपयोग करता हूं।

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

उपयोग करने के लिए, आप कुछ ऐसा करेंगे:

jQuery(document).ready(function($){
  $('#myelem').center();
});

— Volomike
स्रोत

मुझे आपके सुधार पसंद हैं; हालाँकि, अभी भी एक समस्या है जो मुझे आपके द्वारा खोजे जा रहे सटीक व्यवहार के आधार पर मिली है। उपयोगकर्ता के शीर्ष और बाईं ओर पूरी तरह से स्क्रॉल किए जाने पर ही एब्स बहुत अच्छा काम करेगा, अन्यथा उपयोगकर्ता को टाइटल बार में जाने के लिए ब्राउज़र विंडो को स्क्रॉल करना होगा। उस समस्या को हल करने के लिए मैंने इस तरह के बयान के रूप में एक सरल करने का विकल्प चुना: if (top < w.scrollTop()) top = w.scrollTop();साथ ही साथ बाएं के बराबर। फिर, यह अलग व्यवहार प्रदान करता है जो वांछनीय हो सकता है या नहीं।

— एलेक्स जोर्गेनसन

11

मैं jQuery UI position फ़ंक्शन का उपयोग करूंगा ।

कार्यशील डेमो देखें ।

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

अगर मेरे पास आईडी "टेस्ट" के साथ एक div है, तो निम्न स्क्रिप्ट तैयार दस्तावेज़ पर विंडो में div को केंद्र में रखेगी। (स्थिति विकल्पों में "मेरे" और "पर" के लिए डिफ़ॉल्ट मान "केंद्र" हैं)

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

— andy_edward
स्रोत

8

मैं एक मुद्दे को सही करना चाहूंगा।

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

उपरोक्त कोड उन मामलों में काम नहीं करेगा जब this.height(मान लें कि उपयोगकर्ता स्क्रीन का आकार बदलता है और सामग्री गतिशील है) और scrollTop() = 0, उदाहरण:

window.heightहै 600
this.heightहै650

600 - 650 = -50  

-50 / 2 = -25

अब बॉक्स -25ऑफ़स्क्रीन केंद्रित है ।

— जॉन कसाई
स्रोत

6

यह अप्रयुक्त है, लेकिन कुछ इस तरह से काम करना चाहिए।

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

— एंड्रयू हेजेज
स्रोत

6

मुझे नहीं लगता कि अगर आप किसी तत्व को हमेशा पृष्ठ के मध्य में केन्द्रित करना चाहते हैं, तो एक पूर्ण स्थिति होना सबसे अच्छा होगा। आप शायद एक निश्चित तत्व चाहते हैं। मुझे एक और jquery सेंटिंग प्लगइन मिला जो निश्चित पोजिशनिंग का उपयोग करता था। इसे निश्चित केंद्र कहा जाता है ।

— फ्रेड
स्रोत

4

इस फ़ंक्शन के संक्रमण घटक ने क्रोम में मेरे लिए वास्तव में खराब काम किया (कहीं और परीक्षण नहीं किया)। मैं खिड़की के एक झुंड का आकार बदल दूंगा और मेरा तत्व धीरे-धीरे चारों ओर स्कूटर को छांटने की कोशिश करेगा।

तो निम्नलिखित फ़ंक्शन टिप्पणी करता है कि भाग। इसके अलावा, मैंने वैकल्पिक x & y बूलियन्स में पास होने के लिए पैरामीटर जोड़े, यदि आप लंबवत रूप से केंद्र में रखना चाहते हैं लेकिन क्षैतिज रूप से नहीं, उदाहरण के लिए:

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

— एरिक डी। फील्ड्स
स्रोत

4

ब्राउज़र व्यूपोर्ट (विंडो) के सापेक्ष तत्व को केंद्र में रखने के लिए position: absolute, सही स्थिति मान का उपयोग नहीं किया जाना चाहिए fixed(निरपेक्ष साधन: "तत्व अपने पहले तैनात (स्थिर नहीं) पूर्वज तत्व के सापेक्ष स्थित है)"।

प्रस्तावित केंद्र प्लगइन का यह वैकल्पिक संस्करण "px" के बजाय "%" का उपयोग करता है, इसलिए जब आप विंडो को आकार देते हैं तो सामग्री केंद्र में रहती है:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

आपको margin: 0सामग्री मार्जिन को चौड़ाई / ऊंचाई से बाहर करने की आवश्यकता है (क्योंकि हम तय की गई स्थिति का उपयोग कर रहे हैं, मार्जिन होने का कोई मतलब नहीं है)। JQuery के अनुसार डॉक का उपयोग करने .outerWidth(true)में मार्जिन शामिल होना चाहिए, लेकिन जब मैंने क्रोम में कोशिश की तो यह अपेक्षित रूप से काम नहीं कर पाया।

50*(1-ratio)से आता है:

खिड़की की चौड़ाई: W = 100%

तत्व चौड़ाई (% में): w = 100 * elementWidthInPixels/windowWidthInPixels

उन्हें छोड़ दिया केंद्रित को शांत करने के लिए:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

— डिएगो
स्रोत

4

यह भी खूब रही। मैंने एक कॉलबैक फ़ंक्शन जोड़ा

center: function (options, callback) {

if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

— कीथ
स्रोत

4

संपादित करें:

अगर प्रश्न ने मुझे कुछ भी सिखाया है, तो यह है: पहले से ही काम करने वाले कुछ को मत बदलो :)

मैं http://www.jakpsatweb.cz/css/css-vertical-center-solution.html पर कैसे संभाला गया था इसकी (लगभग) शब्दशः प्रतिलिपि उपलब्ध करा रहा हूँ - यह IE के लिए भारी हैक किया गया है, लेकिन शुद्ध सीएसएस तरीका प्रदान करता है प्रश्न का उत्तर दे रहा है:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

फिडल: http://jsfiddle.net/S9upd/4/

मैंने इसे ब्राउज़रशॉट्स के माध्यम से चलाया है और यह ठीक लगता है; अगर कुछ और नहीं है, तो मैं मूल को नीचे रखूंगा ताकि सीएसएस कल्पना द्वारा निर्धारित मार्जिन प्रतिशत हैंडलिंग दिन की रोशनी को देख सके।

मूल:

लगता है मुझे पार्टी में देर हो रही है!

ऊपर कुछ टिप्पणियां हैं जो यह बताती हैं कि यह एक सीएसएस प्रश्न है - चिंताओं और सभी का पृथक्करण। मुझे यह कहते हुए प्रस्तावना दें कि सीएसएस ने वास्तव में इस एक के पैर में गोली मार दी थी। मेरा मतलब है, यह करना कितना आसान होगा:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

सही? कंटेनर का ऊपरी बाएं कोने स्क्रीन के केंद्र में होगा, और नकारात्मक मार्जिन के साथ सामग्री पृष्ठ के पूर्ण केंद्र में जादुई रूप से फिर से दिखाई देगी! http://jsfiddle.net/rJPPc/

गलत! क्षैतिज स्थिति ठीक है, लेकिन लंबवत ... ओह, मैं देख रहा हूं। जाहिरा तौर पर सीएसएस में, जब शीर्ष मार्जिन को% में सेट किया जाता है, तो मूल्य की गणना एक प्रतिशत के रूप में की जाती है जिसमें युक्त ब्लॉक की चौड़ाई के सापेक्ष हमेशा होता है । सेब और संतरे की तरह! यदि आपको मुझ पर या मोज़िला डोकोसा पर भरोसा नहीं है, तो सामग्री की चौड़ाई को समायोजित करके ऊपर की ओर फ़िडेल के साथ एक नाटक करें और आश्चर्यचकित हो जाएं।

अब, सीएसएस मेरी रोटी और मक्खन होने के साथ, मैं हार मानने वाला नहीं था। उसी समय, मैं चीजों को आसान पसंद करता हूं, इसलिए मैंने एक चेक सीएसएस गुरु के निष्कर्षों को उधार लिया है और इसे काम कर रहे एक बेला में बनाया है। लंबी कहानी छोटी, हम एक तालिका बनाते हैं जिसमें ऊर्ध्वाधर-संरेखण मध्य में सेट होता है:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

और सामग्री की स्थिति अच्छे पुराने मार्जिन के साथ ठीक-ठीक है : 0 ऑटो; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}

वादे के अनुसार काम करना: http://jsfiddle.net/teDQ2/

— ov
स्रोत

1

समस्या यह है कि केंद्रित नहीं है।

— कोनराड बोरोस्की

@GlitchMr: मैं कल काम बॉक्स पर दोहरी जांच करना चाहता हूं, लेकिन दूसरी फिडेल क्रोम / सफारी मैक पर ठीक काम करती है

— ov

ठीक है, मैंने क्रोम, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर 8+ (IE7 काम नहीं करता है) में जाँच की है और यह काम करता है। लेकिन यह ओपेरा में काम नहीं करता है ... और यह बहुत ही अजीब है कि यह सरल सीएसएस है और यह अन्य ब्राउज़रों में काम करता है।

— कोनराड बोरोस्की

@GlitchMr: इतने पुराने सवाल पर नजर रखने के लिए धन्यवाद। मैंने "सही" उत्तर दिखाने के लिए ऊपर दिए गए फिडेल लिंक को अपडेट कर दिया है - मुझे बताएं कि क्या यह आपके लिए काम करता है (या गुमनामी में नीचे आया है। क्या मुझे अपना मौका मिल जाएगा! :)

— ov

हे, सब मैं करूँगा upvoting नहीं है जब तक कि उचित जवाब नहीं दिखाएगा (वर्तमान में यह अभी भी ओपेरा में काम नहीं करता है, लेकिन मुझे लगता है कि यह ब्राउज़र बग है) ... ओह रुको ... यह काम करता है अगर मैं खिड़की का आकार बदल दूंगा और नहीं अगर मैं JSFiddle में ही खिड़कियों का आकार बदल दूंगा। तो, यह काम करता है :)। इसके लिए मैं क्षमा प्रार्थी हूं। लेकिन फिर भी, आपको चेतावनी देनी चाहिए कि यह IE7 में काम नहीं करता है। +1। ओह, और मुझे लगता है कि यह IE6 में काम करता है ...

— कोनराड बोरोस्की

3

मेरे पास यहां एक "केंद्र" विधि है जो यह सुनिश्चित करती है कि जिस तत्व को आप केंद्र में लाने का प्रयास कर रहे हैं वह न केवल "निश्चित" या "निरपेक्ष" स्थिति के लिए है, बल्कि यह भी सुनिश्चित करता है कि जिस तत्व को आप केंद्र में रख रहे हैं वह उसके माता-पिता से छोटा है, यह केंद्र और तत्व माता-पिता के सापेक्ष है, यदि तत्व माता-पिता स्वयं तत्व से छोटा है, तो यह DOM को अगले माता-पिता तक सीमित कर देगा, और इसे उसी के सापेक्ष केंद्र कर देगा।

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

— रयान
स्रोत

2

मैं इसका उपयोग करता हूं:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

— होल्डेन
स्रोत

2

कृपया इसका उपयोग करें:

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

— सत्य
स्रोत

0

आप उस खराब संक्रमण को प्राप्त कर रहे हैं क्योंकि आप हर बार दस्तावेज़ स्क्रॉल किए जाने पर तत्व की स्थिति को समायोजित कर रहे हैं। आप जो चाहते हैं, वह निश्चित स्थिति का उपयोग करना है। मैंने कोशिश की कि ऊपर सूचीबद्ध केंद्र प्लगइन और वह समस्या को अच्छी तरह से हल करने के लिए लगता है। फिक्स्ड पोजिशनिंग आपको एक बार एक तत्व को केंद्रित करने की अनुमति देता है, और सीएसएस संपत्ति आपके द्वारा हर बार स्क्रॉल करने पर आपके लिए उस स्थिति को बनाए रखने का ध्यान रखेगी।

— skaterdav85
स्रोत

0

यहाँ मेरा संस्करण है। इन उदाहरणों को देखने के बाद मैं इसे बदल सकता हूं।

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

— एंडी
स्रोत

0

इसके लिए किसी जौकीरी की जरूरत नहीं है

मैंने इसका उपयोग दिव्य तत्व को केन्द्रित करने के लिए किया। सीएसएस शैली,

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

खुला तत्व

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

— सजीथा रथनायके
स्रोत

क्या आप html को अपने उत्तर में शामिल करना भूल गए?

— बेन

0

मेरे उत्तरदाता को उत्तर दें यह उत्तर दिया गया है कि यह उनके उत्तर का संशोधित संस्करण है जिसका उपयोग मैं धार्मिक रूप से करता हूं। मुझे लगा कि मैं इसे साझा करूंगा, क्योंकि यह आपके लिए विभिन्न स्थितियों जैसे कि विभिन्न प्रकार के लिए थोड़ी अधिक कार्यक्षमता जोड़ता हैposition या दोनों के बजाय केवल क्षैतिज / ऊर्ध्वाधर केंद्रित करना चाहते हैं।

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

मेरे में <head>:

<script src="scripts/center.js"></script>

उपयोग के उदाहरण:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

यह किसी भी पोजिशनिंग प्रकार के साथ काम करता है, और इसका उपयोग आपकी पूरी साइट पर आसानी से किया जा सकता है, साथ ही आपके द्वारा बनाई गई किसी भी अन्य साइट पर आसानी से पोर्टेबल हो सकता है। कुछ और ठीक से केंद्रित करने के लिए कोई और अधिक कष्टप्रद नहीं।

आशा है कि यह किसी के लिए उपयोगी है! का आनंद लें।

— Fata1Err0r
स्रोत

0

ऐसा करने के बहुत सारे तरीके। मेरी वस्तु को प्रदर्शन के साथ छिपा कर रखा गया है : कोई भी केवल बॉडी टैग के अंदर नहीं है ताकि स्थिति बॉडी के सापेक्ष हो। $ ("# Object_id") का उपयोग करने के बाद । () , मैं $ ("# object_id") केंद्र () को कॉल करता हूं ।

मैं स्थिति का उपयोग करता हूं : निरपेक्ष क्योंकि यह संभव है, विशेष रूप से एक छोटे से मोबाइल डिवाइस पर, कि मोडल विंडो डिवाइस विंडो से बड़ी है, इस स्थिति में कुछ मोडल सामग्री अप्राप्य हो सकती है यदि पोजिशनिंग तय की गई थी।

यहाँ मेरा स्वाद अन्य उत्तरों और मेरी विशिष्ट आवश्यकताओं पर आधारित है:

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

— मैं एक
स्रोत

0

आप सीएसएस translateसंपत्ति का उपयोग कर सकते हैं:

position: absolute;
transform: translate(-50%, -50%);

अधिक जानकारी के लिए इस पोस्ट को पढ़ें ।

— फ्रेड के
स्रोत

1

ऐसा कुछ करने के लिए, आप अपना सेट करना चाहेंगे left: 50%और top: 50%फिर आप इसके केंद्र बिंदु को सही ढंग से स्थानांतरित करने के लिए ट्रांसफॉर्म ट्रांसलेशन का उपयोग कर सकते हैं। हालाँकि, इस विधि के साथ, क्रोम जैसे ब्राउज़र आपके पाठ को बाद में विकृत / धुंधला कर देंगे, जो आमतौर पर वांछनीय नहीं है। खिड़की की चौड़ाई / ऊँचाई को पकड़ना बेहतर है, और उसके बाद बाएँ / शीर्ष को उस स्थिति के आधार पर बदल दें, जिसमें परिवर्तन के साथ गड़बड़ है। विकृति को रोकता है और हर उस ब्राउज़र पर काम करता है जिस पर मैंने इसका परीक्षण किया है।

— Fata1Err0r

0

आम तौर पर, मैं ऐसा केवल CSS के साथ ही करूंगा ... लेकिन जब से आपने आपसे jQuery के साथ ऐसा करने का तरीका पूछा है ...

निम्नलिखित कोड अपने कंटेनर के अंदर क्षैतिज और लंबवत दोनों रूप से एक div केंद्र बनाता है:

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");

body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

स्निपेट का विस्तार करें

(यह भी देखें फिडल )

— जॉन सेलर्स
स्रोत

0

सीएसएस समाधान केवल दो लाइनों में

यह आपके आंतरिक विभाजन को क्षैतिज और लंबवत रूप से केंद्रीकृत करता है।

#outer{
  display: flex;
}
#inner{
margin: auto;

}

केवल क्षैतिज संरेखण के लिए, बदलें

margin: 0 auto;

और ऊर्ध्वाधर के लिए, परिवर्तन

margin: auto 0;

— शिवम छेत्री
स्रोत

0

बस कहें: $ ("# divid")। Html ($ (''))। Html ($ ("# divid")। Html ());

— 1.618
स्रोत

-6

आप एक div केंद्रित करने के लिए CSS का उपयोग क्यों नहीं करते हैं?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}

— अहमद बालविपुर
स्रोत

2

आपके उदाहरण में, div का शीर्ष / बाईं ओर वह केंद्र होगा जहाँ केंद्र माना जाता है।

— क्रिस्टी मिहाई

स्क्रीन पर एक DIV को केन्द्रित करने के लिए jQuery का उपयोग करना

अपडेट करें :

संपादित करें:

मूल: