استخدام jQuery لتوسيط DIV على الشاشة

https://stackoverflow.com/questions/210717

03-07-2019
|

سؤال

كيف أقوم بإعداد a <div> في وسط الشاشة باستخدام مسج؟

المحلول

وأحب إضافة وظائف إلى مسج ذلك من شأنه أن يساعد هذه الوظيفة:

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

وعرض توضيحي: كمان (ومع المعلمة المضافة)

نصائح أخرى

وأضع مسج المساعد هنا

ومقطعة VERY

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

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

هل هذا صحيح؟

UPDATE:

href="http://css-tricks.com/centering-percentage-widthheight-elements/" CSS-الخدع

.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 () إلى التفاف القيم، وأنا أيضا أن تأخذ في الاعتبار أن مسج قد يكون في "لا صراع" واسطة، مثل على سبيل المثال في وورد.

وننصحك بأن التفاف القيم العليا واليسرى مع Math.abs () كما فعلت أدناه. إذا كان إطار صغير جدا، وحوار مشروط لديه مربع وثيق في القمة، وهذا سوف يمنع مشكلة عدم رؤية مربع الإغلاق. أن وظيفة توني كان القيم السلبية المحتملة. وخير مثال على الطريقة التي ينتهي مع القيم السلبية هو إذا كان لديك مربع حوار واسع تركز لكن المستخدم النهائي تثبيت عدة أشرطة الأدوات و / أو زيادة الخط الافتراضي له - في مثل هذه الحالة، مربع وثيق على حوار مشروط (إذا في الجزء العلوي) قد لا تكون واضحة وقابلة للنقر.

والشيء الآخر أقوم به هو تسريع هذا الأمر قليلا بواسطة التخزين المؤقت الكائن $ (إطار) حتى أستطيع تقليل traversals 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();
});

سأستخدم واجهة مستخدم مسج position وظيفة.

شاهد عرض العمل.

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

إذا كان لدي div بمعرف "اختبار" للتوسيط، فسيقوم البرنامج النصي التالي بتوسيط div في النافذة على المستند الجاهز.(القيم الافتراضية لـ "my" و"at" في خيارات الموضع هي "center")

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

وأود أن تصحيح قضية واحدة.

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 أفسكرين.

وأنا لا أعتقد أن وجود موقف المطلق سيكون من الأفضل إذا كنت تريد عنصر تركز دائما في منتصف الصفحة. ربما كنت ترغب عنصر ثابت. لقد وجدت مسج تركز المساعد أخرى تستخدم المواقع الثابتة. ويطلق عليه ثابتة مركز .

وهذا هو لم تختبر، ولكن شيئا من هذا القبيل يجب أن تعمل.

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

وعملت المكون انتقال هذه الوظيفة حقا سيئة بالنسبة لي في كروم (لم يختبر في مكان آخر). وأود أن تغيير حجم نافذة حفنة وأن عنصر بلدي نوع من إنطلق بسرعة في جميع أنحاء ببطء، في محاولة للحاق بها.

وهكذا الدالة التالية التعليقات التي جزء من. وبالإضافة إلى ذلك، وأضفت المعلمات لتمرير في العاشر الاختيارية والقيم المنطقية ذ، إذا كنت تريد أن تركز عموديا وليس أفقيا، على سبيل المثال:

// 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);

لتوسيط عنصر نسبة إلى العرض المتصفح (نافذة)، لا تستخدم position: absolute، ينبغي fixed قيمة الموقف الصحيح (وسائل المطلقة: "يتم وضع العنصر بالنسبة لأول وضعه (وليس ثابت) عنصر سلفها" ).

ويستخدم هذا صيغة بديلة من البرنامج المساعد المركز المقترح "٪" بدلا من "مقصف" حتى عند تغيير حجم نافذة وتبقي تركز على المحتوى:

$.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 استبعاد هوامش المحتوى من عرض / ارتفاع (منذ نحن نستخدم موقف ثابت، وجود هوامش لا معنى له). وفقا لوثيقة مسج باستخدام .outerWidth(true) ينبغي أن تشمل الهوامش، لكنها لم تعمل كما هو متوقع عندما حاولت في كروم.

وو50*(1-ratio) يأتي من:

وعرض النافذة: W = 100%

وعنصر العرض (في المائة): w = 100 * elementWidthInPixels/windowWidthInPixels

ولهم calcule اليسار محورها:

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

وهذا شيء عظيم. وأضاف I دالة رد

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
   }
}

يحرر:

إذا علمني السؤال أي شيء فهو هذا:لا تغير شيئًا يعمل بالفعل :)

أقدم نسخة حرفية (تقريبًا) لكيفية التعامل مع هذا الأمر http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - لقد تم اختراقه بشكل كبير من أجل IE ولكنه يوفر طريقة CSS خالصة للإجابة على السؤال:

.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/

لقد قمت بتشغيل هذا من خلال لقطات المتصفح ويبدو جيدًا؛إذا لم يكن هناك أي شيء آخر، فسوف أحتفظ بالنسخة الأصلية أدناه حتى ترى نسبة الهامش التي تمليها مواصفات CSS النور.

إبداعي:

يبدو أنني تأخرت على الحفلة!

هناك بعض التعليقات أعلاه تشير إلى أن هذا سؤال CSS - فصل الاهتمامات وكل شيء.اسمحوا لي أن أستهل هذا بالقول إن CSS حقًا أطلق النار على نفسه في القدم على هذا واحد.أعني، كم سيكون من السهل القيام بذلك:

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

يمين؟سيكون الركن العلوي الأيسر للحاوية في وسط الشاشة، ومع الهوامش السلبية، سيظهر المحتوى مرة أخرى بطريقة سحرية في وسط الصفحة تمامًا! http://jsfiddle.net/rJPPc/

خطأ! الوضع الأفقي جيد، لكن عموديًا...حسنا أرى ذلك.على ما يبدو في CSS، عند تعيين الهوامش العليا في٪، يتم حساب القيمة كـ نسبة دائما نسبة إلى عرض من الكتلة المحتوية.مثل التفاح والبرتقال!إذا كنت لا تثق بي أو بـ Mozilla doco، فالعب بالكمان أعلاه عن طريق ضبط عرض المحتوى وستندهش.

الآن، مع كون CSS مصدر رزقي، لم أكن على وشك الاستسلام.وفي الوقت نفسه، أفضّل أن تكون الأمور سهلة، لذلك قمت باستعارة النتائج التي توصل إليها أ المعلم التشيكي CSS وجعلها في كمان العمل.باختصار، قمنا بإنشاء جدول يتم فيه ضبط المحاذاة الرأسية على المنتصف:

<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/

وما قلته هنا هو "الوسط" الأسلوب الذي يضمن العنصر الذي تحاول المركز هو ليس فقط من "ثابت" أو "المطلق" لتحديد المواقع، ولكنه يضمن أيضا أن العنصر كنت تركز أصغر من الأم ، هذه المراكز وعنصر بالنسبة لهي الأم، إذا كان الوالد عناصر أصغر من العنصر نفسه، وسوف نهب حتى 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');
        }
    };

وأنا استخدم هذا:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/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();

وكنت الحصول على هذا التحول الفقراء لأنك ضبط موضع العنصر في كل مرة يتم تمريره الوثيقة. ما تريده هو استخدام المواقع الثابتة. حاولت أن مركز ثابت المساعد المذكورة أعلاه والتي يبدو أن تفعل حل المشكلة بشكل جيد. وضع ثابت يسمح لك لتوسيط العنصر مرة واحدة، وسوف خاصية CSS رعاية الحفاظ على هذا الموقف بالنسبة لك في كل مرة كنت انتقل.

وهنا هو الإصدار بلدي. أنا قد تغييره بعد أن ننظر في هذه الأمثلة.

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

لا حاجة مسج لهذا

وأنا استخدم هذا العنصر إلى مركز شعبة. المغلق النمط،

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

});

تحديثي لإجابة توني إلهذه هي النسخة المعدلة من إجابته التي أستخدمها دينياً الآن.اعتقدت أنني سأشاركه، لأنه يضيف المزيد من الوظائف إليه في المواقف المختلفة التي قد تكون لديك، مثل الأنواع المختلفة 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")

وهو يعمل مع أي نوع من أنواع تحديد المواقع، ويمكن استخدامه في جميع أنحاء موقعك بسهولة، كما يمكن نقله بسهولة إلى أي موقع آخر تقوم بإنشائه.لا مزيد من الحلول المزعجة لتوسيط شيء ما بشكل صحيح.

آمل أن يكون هذا مفيدًا لشخص ما هناك!يتمتع.

الكثير من الطرق للقيام بذلك.يتم إخفاء كائني مع عرض لا شيء فقط داخل علامة BODY بحيث يكون الموضع متعلقًا بالجسم.بعد الاستخدام $("#object_id").show(), ، أنا أتصل $("#object_id").center()

أنا أستعمل الموقف: مطلق لأنه من الممكن، خاصة على جهاز محمول صغير، أن تكون النافذة المشروطة أكبر من نافذة الجهاز، وفي هذه الحالة قد لا يمكن الوصول إلى بعض المحتوى المشروط إذا تم إصلاح الموضع.

هذه هي نكهتي بناءً على إجابات الآخرين واحتياجاتي المحددة:

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

عادةً، سأفعل ذلك باستخدام 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>

(أنظر أيضا هذا الكمان)

حل CSS في سطرين فقط

إنه يركز على div الداخلي الخاص بك أفقيًا وعموديًا.

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

}

للمحاذاة الأفقية فقط، قم بالتغيير

margin: 0 auto;

وللتغيير العمودي

margin: auto 0;

هل يمكن استخدام خاصية CSS translate:

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

ومقروءة على هذا المنصب للحصول على مزيد من التفاصيل.

وماذا كنت لا تستخدم CSS لتركز على شعبة؟

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow