جاوااسکریپت - استفاده از jQuery برای مرکز کردن یک DIV در صفحه

چگونه با استفاده از jQuery یک <div> را در مرکز صفحه قرار دهم؟

پاسخ شماره ۱

من دوست دارم به 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();

دمو: فیندل (با پارامتر اضافه شده)

پاسخ شماره ۲

من اینجا یک پلاگین جیکوئری گذاشتم

نسخه بسیار کوتاه

$('#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();

نسخه پلاگین

(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});
    });
);

درسته؟

بهروزرسانی :

از CSS-Tricks

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

پاسخ شماره ۳

من پیشنهاد میکنم از ابزار موقعیتیابی jQueryUI استفاده کنید

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

که به شما امکانات بیشتری نسبت به فقط مرکز کردن میدهد ...

پاسخ شماره ۴

این هم تلاش من برای آن است. در نهایت از آن برای کلون لایتباکس خودم استفاده کردم. مزیت اصلی این راهحل این است که عنصر بهطور خودکار در مرکز باقی میماند حتی اگر اندازه پنجره تغییر کند که آن را برای این نوع استفاده ایدهآل میکند.

$.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;
}

پاسخ شماره ۵

شما میتوانید فقط با استفاده از CSS به این شکل مرکز کنید:

نمونه کاری

.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() به شما امکان انجام محاسبات پایهای در CSS را میدهد.

مستندات MDN برای calc()
جدول پشتیبانی مرورگر

پاسخ شماره ۶

من در حال گسترش پاسخ عالی داده شده توسط @TonyL هستم. من از Math.abs() برای پیچیدن مقادیر استفاده میکنم، و همچنین در نظر میگیرم که ممکن است jQuery در حالت «بدون تداخل» باشد، مانند مثالی در وردپرس.

پیشنهاد میکنم که مقادیر top و left را با Math.abs() بستهبندی کنید همانطور که در زیر انجام دادهام. اگر پنجره خیلی کوچک باشد و کادر محاورهای مدال شما یک دکمه بستن در بالا داشته باشد، این کار از مشکل دیده نشدن دکمه بستن جلوگیری میکند. تابع تونی ممکن بود مقادیر منفی داشته باشد. یک مثال خوب از چگونگی به دست آوردن مقادیر منفی این است که اگر یک کادر محاورهای بزرگ و مرکزی داشته باشید اما کاربر نهایی چندین نوار ابزار نصب کرده باشد و/یا اندازه فونت پیشفرض خود را افزایش داده باشد -- در چنین حالتی، دکمه بستن در یک کادر محاورهای مدال (اگر در بالا باشد) ممکن است قابل مشاهده و کلیک کردن نباشد.

چیز دیگری که انجام میدهم این است که این را کمی سریعتر میکنم با ذخیرهسازی (cache) شیء $ (window) تا حرکات اضافی DOM را کاهش دهم، و از یک CSS خوشهای استفاده میکنم.

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();
});

پاسخ شماره ۷

من از تابع jQuery UI position استفاده میکنم.

مشاهده دموی عملی.

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

اگر من یک div با شناسه "test" دارم که بخواهم آن را وسطچین کنم، اسکریپت زیر div را هنگام آماده شدن سند در مرکز پنجره قرار میدهد. (مقادیر پیشفرض برای "my" و "at" در گزینههای موقعیت "center" هستند)

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