<div>JQuery kullanarak ekranın ortasındaki a ayarını nasıl yaparım ?

Bu işlev yardımcı olacaktır jQuery için işlevler eklemek gibi:

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

Şimdi yazabiliriz:

$(element).center();

Demo: Fiddle (eklenen parametre ile)

Bir koyun eklentisi jquery burada

ÇOK KISA VERSİYON

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

KISA VERSİYON

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

Bu kod tarafından etkinleştirildi:

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

PLUGIN SÜRÜMÜ

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

Bu kod tarafından etkinleştirildi:

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

bu doğru mu ?

GÜNCELLEME :

Gönderen CSS-Tricks

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

JQueryUI Position yardımcı programını tavsiye ederim

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

size sadece merkezlemekten çok daha fazla olanak sunuyor ...

İşte benim gitmem. Sonunda Lightbox klonum için kullandım. Bu çözümün ana avantajı, pencere yeniden boyutlandırılsa bile elemanın otomatik olarak ortalanmış olarak kalması, bu tür kullanım için idealdir.

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

Bu şekilde ortalamak için tek başına CSS kullanabilirsiniz:

Çalışma Örneği

.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 ile temel hesaplamalar yapabilmenizi sağlar.

calc()Tarayıcı için MDN Belgeleri
destek tablosu

@TonyL tarafından verilen harika cevabı genişletiyorum. Değerleri sarmak için Math.abs () ekliyorum ve ayrıca jQuery, örneğin WordPress gibi, "çakışma yok" modunda olabilir dikkate alır.

Üst ve sol değerleri aşağıda yaptığım gibi Math.abs () ile sarmanızı öneririm. Pencere çok küçükse ve kalıcı iletişim kutunuzun üstünde bir kapatma kutusu varsa, bu kapatma kutusunu görmeme sorununu önler. Tony'nin işlevi potansiyel olarak negatif değerlere sahip olurdu. Negatif değerlerle nasıl sonuçlanacağınıza iyi bir örnek, büyük bir ortalanmış iletişim kutunuz varsa ancak son kullanıcı birkaç araç çubuğu yüklediyse ve / veya varsayılan yazı tipini artırdıysa - böyle bir durumda, kalıcı bir iletişim kutusundaki ( üstte) görünür ve tıklanabilir olmayabilir.

Yaptığım başka bir şey, $ (window) nesnesini önbelleğe alarak bu kadar hızlandırarak ekstra DOM geçişlerini azalttığım ve bir küme CSS kullandım.

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

Kullanmak için şöyle bir şey yaparsınız:

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

Ben kullanırım jQuery UI position işlevi.

Çalışma demosuna bakın .

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

Eğer merkezi "id" ile bir div varsa o zaman aşağıdaki komut dosyası belge hazır penceresinde penceresinde ortalar. (konum seçeneklerinde "my" ve "at" için varsayılan değerler "center" dır)

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

Bir sorunu düzeltmek istiyorum.

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

Yukarıdaki kod this.height(kullanıcının ekranı yeniden boyutlandırdığını ve içeriğin dinamik olduğunu varsayalım) ve scrollTop() = 0örneğin:

window.heightolduğunu 600
this.heightedilir650

600 - 650 = -50  

-50 / 2 = -25

Şimdi kutu -25ekran dışında ortalanıyor .

Bu test edilmemiştir, ancak böyle bir şey işe yaramalıdır.

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

Her zaman sayfanın ortasına ortalanmış bir öğe istiyorsanız, mutlak bir pozisyona sahip olmanın en iyi olacağını düşünmüyorum. Muhtemelen sabit bir eleman istiyorsunuz. Sabit konumlandırma kullanan başka bir jquery merkezleme eklentisi buldum. Buna sabit merkez denir .

Bu işlevin geçiş bileşeni Chrome'da benim için gerçekten kötü çalıştı (başka bir yerde test etmedi). Pencereyi bir grup olarak yeniden boyutlandırırdım ve elementim yavaşça etrafta bir miktar scoot, yakalamaya çalışıyordu.

Yani aşağıdaki fonksiyon bu kısmı yorumlar. Buna ek olarak, dikey olarak ortalamak ancak yatay olarak yapmak istemiyorsanız, isteğe bağlı x & y booleans'e geçmek için parametreler ekledim, örneğin:

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

Öğeyi tarayıcı görünüm penceresine (pencere) göre ortalamak için, kullanmayın position: absolute, doğru konum değeri olmalıdır fixed(mutlak şu anlama gelir: "Öğe, ilk konumlandırılmış (statik değil) ata öğesine göre konumlandırılmıştır").

Önerilen merkez eklentisinin bu alternatif sürümü "px" yerine "%" kullanır, bu nedenle pencereyi yeniden boyutlandırdığınızda içerik ortalanır:

$.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İçerik kenar boşluklarını genişlik / yükseklikten hariç tutmanız gerekir (sabit konum kullandığımızdan, kenar boşluklarına sahip olmanın hiçbir anlamı yoktur). JQuery doc kullanımına göre .outerWidth(true)kenar boşlukları içermelidir, ancak Chrome'da denediğimde beklendiği gibi çalışmadı.

Gelen 50*(1-ratio):

Pencere genişliği: W = 100%

Eleman Genişliği (% olarak): w = 100 * elementWidthInPixels/windowWidthInPixels

Ortalanmış solu hesaplamak için:

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

Bu harika. Geri arama işlevi ekledim

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

Düzenle:

Soru bana bir şey öğrettiyse, bu: zaten işe yarayan bir şeyi değiştirmeyin :)

Bunun http://www.jakpsatweb.cz/css/css-vertical-center-solution.html adresinde nasıl ele alındığının (neredeyse) kelimesi kelimesine bir kopyasını sağlıyorum - IE için ağır bir şekilde saldırıya uğradı, ancak soruyu cevaplamak:

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

Keman: http://jsfiddle.net/S9upd/4/

Bunu tarayıcı görüntüleri ile çalıştırdım ve iyi görünüyor; başka bir şey için, orijinali aşağıda tutacağım, böylece CSS spesifikasyonunun belirlediği marj yüzdesi işleminin gün ışığını görmesi.

Orijinal:

Partiye geç kaldım gibi görünüyor!

Yukarıda bunun bir CSS sorusu olduğunu öne süren bazı yorumlar var - endişelerin ayrılması ve hepsi. CSS'nin bu konuda gerçekten kendini vurduğunu söyleyerek önceden haber vereyim . Yani, bunu yapmak ne kadar kolay olurdu:

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

Sağ? Konteyner'in sol üst köşesi ekranın ortasında olacak ve negatif kenar boşluklarıyla içerik sihirli bir şekilde sayfanın mutlak merkezinde yeniden görünecek! http://jsfiddle.net/rJPPc/

Yanlış! Yatay konumlandırma iyi, ama dikey olarak ... Oh, anlıyorum. Görünüşe göre css cinsinden, üst kenar boşluklarını% olarak ayarlarken, değer her zaman içeren bloğun genişliğine göre yüzde olarak hesaplanır. Elma ve portakal gibi! Bana veya Mozilla doco'ya güvenmiyorsanız, içerik genişliğini ayarlayarak yukarıdaki kemanla oynayın ve hayran kalın.

Şimdi, CSS benim ekmek ve tereyağımken vazgeçmek üzereydim. Aynı zamanda, işleri kolay tercih ederim, bu yüzden bir Çek CSS gurusunun bulgularını ödünç aldım ve çalışan bir keman haline getirdim . Uzun lafın kısası, dikey hizalamanın orta olarak ayarlandığı bir tablo oluştururuz:

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

Ve içeriğin konumu eski iyi bir kenar boşluğu ile ayarlanmıştır : 0 otomatik; :

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

Vaat edildiği gibi çalışan keman: http://jsfiddle.net/teDQ2/

Burada sahip olduğum şey, merkezlemeye çalıştığınız öğenin yalnızca "sabit" veya "mutlak" konumlandırma değil, aynı zamanda merkezlediğiniz öğenin üst öğesinden daha küçük olmasını sağlayan bir "merkez" yöntemidir, bu merkezler ve öğeye göre öğe üst öğedir; öğelerin üst öğesi öğenin kendisinden daha küçükse, DOM'yi bir sonraki üst öğeye yağlar ve buna göre ortalar.

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

Bunu kullanıyorum:

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

Lütfen bunu kullanın:

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

bu zayıf geçişi alıyorsunuz çünkü belgenin her kaydırılışında öğenin konumunu ayarlıyorsunuz. İstediğiniz sabit konumlandırma kullanmaktır. Yukarıda listelenen sabit merkez eklentisini denedim ve sorunu güzelce çözüyor gibi görünüyor. Sabit konumlandırma, bir öğeyi bir kez ortalamanıza olanak tanır ve CSS özelliği, her kaydırma yaptığınızda bu konumu korumanıza yardımcı olur.

İşte benim versiyonum. Bu örneklere baktıktan sonra değiştirebilirim.

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

Bunun için jquery gerek yok

Bunu Div öğesini ortalamak için kullandım. Css Tarzı,

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

Açık eleman

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

});

TONY L'İN CEVAPINA GÜNCELLEMİM Bu, şimdi dinsel olarak kullandığım cevabının değiştirilmiş versiyonudur. Paylaşabileceğimi düşündüm, çünkü sahip olabileceğiniz çeşitli durumlar için biraz daha fazla işlevsellik ekler, örneğin positionher ikisinden ziyade farklı tiplerde yatay veya dikey merkezleme gibi.

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

Benim <head>:

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

Kullanım örnekleri:

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

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

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

Herhangi bir konumlandırma türüyle çalışır ve tüm sitenizde kolayca ve ayrıca oluşturduğunuz diğer herhangi bir siteye kolayca taşınabilir. Bir şeyi düzgün bir şekilde ortalamak için can sıkıcı geçici çözümlere gerek yok.

Umarım bu orada birileri için yararlıdır! Zevk almak.

Bunu yapmanın birçok yolu var. Nesnem display ile gizli tutulur : hiçbiri BODY etiketinin içinde değildir, böylece konumlandırma BODY'ye göredir. Kullandıktan sonra ( "# object") $. Gösterisi () , arayacağım $ ( "# object_id"). Merkezini ()

Kullandığım position: absolute modal pencere konumlandırma sabit olsaydı modal içeriğin bir kısmını ulaşılmaz olabilir ki bu durumda cihaz penceresinden, daha büyük olduğunu, özellikle küçük mobil cihazda mümkündür çünkü.

İşte başkalarının cevaplarına ve özel ihtiyaçlarıma göre lezzetim:

$.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 translateözelliğini kullanabilirsiniz :

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

Daha fazla ayrıntı için bu yayını okuyun .

Normalde bunu sadece CSS ile yapardım ... ama sizden bunu jQuery ile yapmanın bir yolunu sorduğunuz için ...

Aşağıdaki kod, div öğesini kabının içinde hem yatay hem de dikey olarak ortalar:

$("#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>

(ayrıca bu Fiddle'a bakın )

CSS çözümü Yalnızca iki satırda

İç div'inizi yatay ve dikey olarak merkezileştirir.

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

}

sadece yatay hizalama için

margin: 0 auto;

ve dikey için, değişim

margin: auto 0;

Sadece şunu söyleyin: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

Neden div'ı ortalamak için CSS kullanmıyorsunuz?

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