Wstawiłem jQuery plugin tutaj

BARDZO KRÓTKA WERSJA

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

WERSJA SKRÓCONA

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

Aktywowany tym kodem:

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

WERSJA WTYCZKI

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

Aktywowany tym kodem:

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

Aktualizacja:

From CSS-triki

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

Polecam jQueryUI Position utility

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

Oto moja propozycja. Skończyło się na użyciu go dla mojego klonu Lightbox. Główną zaletą tego rozwiązania jest to, że element pozostanie wyśrodkowany automatycznie, nawet jeśli okno zostanie zmienione, co czyni go idealnym do tego rodzaju zastosowań.

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

Możesz użyć samego CSS, aby wyśrodkować w ten sposób:

Przykład Pracy

.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() pozwala na wykonywanie podstawowych obliczeń w css.

Dokumentacja MDN dla calc()
tabela obsługi przeglądarek

[[2]] rozszerzam o świetną odpowiedź udzieloną przez @ TonyL. Dodaję matematykę.abs() aby zawinąć wartości, a także biorę pod uwagę, że jQuery może być w trybie "bez konfliktu", jak na przykład w WordPress.

Zalecam owinięcie górnej i lewej wartości za pomocą matematyki.abs() tak jak zrobiłem poniżej. Jeśli okno jest zbyt małe, a okno modalne ma okno zamykania u góry, zapobiegnie to problemowi nie zobaczenia okna zamykania. Funkcja Tony ' ego miałaby potencjalnie negatywny wartości. Dobrym przykładem na to, jak kończy się z wartościami ujemnymi jest, jeśli masz duże wyśrodkowane okno dialogowe, ale użytkownik końcowy zainstalował kilka pasków narzędzi i / lub zwiększył swoją domyślną czcionkę - w takim przypadku okno Zamknij w oknie modalnym (jeśli u góry) może nie być widoczne i klikalne.

Inną rzeczą, którą robię, jest przyspieszenie tego trochę przez buforowanie obiektu $(window) tak, że zmniejszam dodatkowe trawersy DOM i używam klastra 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;
}

Aby użyć, zrobiłbyś coś like:

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

Użyłbym jQuery UI position funkcja.

Zobacz demo robocze.

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

Jeśli mam div o id "test" do środka, to następujący skrypt wyśrodkowałby div w oknie dokumentu gotowego. (domyślne wartości dla " my " I " at "w opcjach pozycji to "center")

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

Chciałbym poprawić jedną kwestię.

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

Powyższy kod nie zadziała w przypadku, gdy this.height (Załóżmy, że użytkownik zmienia rozmiar ekranu i zawartość jest dynamiczna) i scrollTop() = 0, Przykład:

window.height na 600
this.height is 650

600 - 650 = -50  

-50 / 2 = -25

Teraz pole jest wyśrodkowane -25 poza ekranem.

Nie sądzę, że posiadanie absolutnej pozycji byłoby najlepsze, jeśli chcesz element zawsze wyśrodkowany w środku strony. Pewnie chcesz mieć stały element. Znalazłem inną wtyczkę jQuery centering, która używała stałego pozycjonowania. Nazywa się stały środek .

To nie jest testowane, ale coś takiego powinno zadziałać.

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

Komponent przejścia tej funkcji działał mi naprawdę słabo w Chrome (nie testowałem gdzie indziej). Zmieniałem rozmiar okna, a mój element powoli się przesuwał, próbując nadrobić zaległości.

Następująca funkcja komentuje tę część. Dodatkowo dodałem parametry do przekazywania w opcjonalnych booleanach X & y, jeśli chcesz wyśrodkować w pionie, ale nie w poziomie, na przykład:

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

Edit:

Jeśli pytanie czegoś mnie nauczyło, to jest to: nie zmieniaj czegoś, co już działa:)

Dostarczam (prawie) dosłowną kopię tego, jak to było obsługiwane na http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - jest mocno zhakowany dla IE, ale zapewnia czysty CSS sposób odpowiedzi na pytanie:

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

Oryginalny:

Wygląda na to, że jestem spóźniony na imprezę!

Są komentarze powyżej, które sugerują, że jest to pytanie CSS-oddzielenie obaw i w ogóle. Pozwolę sobie to poprzedzić mówiąc, że CSS naprawdę strzelił sobie w stopę na tym. Jak łatwo byłoby to zrobić:

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

źle! pozycjonowanie w poziomie jest OK, ale w pionie... Rozumiem. Widocznie w css, podczas ustawiania górnych marginesów w%, wartość jest obliczana jako procent zawsze w stosunku do szerokości bloku zawierającego . Jak jabłka i pomarańcze! Jeśli nie ufasz mi lub Mozilli doco, masz Graj skrzypcami powyżej, dostosowując szerokość treści i bądź zaskoczony.

...

Teraz, gdy CSS był moim chlebem powszednim, nie zamierzałem się poddać. W tym samym czasie, wolę rzeczy łatwe, więc pożyczyłem znaleziska czeskiego Guru CSS i przekształciłem je w działające skrzypce. W skrócie, tworzymy tabelę, w której vertical-align jest ustawione na middle:

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

A pozycja treści jest dopracowana ze starym, dobrym marginesem:0 auto;:

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

Praca zgodnie z obietnicą: http://jsfiddle.net/teDQ2/

Aby wyśrodkować element względem widoku przeglądarki (okna), nie używaj position: absolute, poprawną wartością pozycji powinna być fixed (bezwzględne oznacza: "element jest umieszczony względem pierwszego pozycjonowanego (nie statycznego) elementu nadrzędnego").

Ta alternatywna wersja proponowanej wtyczki center używa " % "zamiast " px", więc po zmianie rozmiaru okna zawartość jest utrzymywana w środku:

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

Należy umieścić margin: 0 aby wykluczyć marginesy zawartości z szerokości/wysokości (ponieważ używają pozycji stałej, posiadanie marginesów nie ma sensu). Według dokumentu jQuery używanie .outerWidth(true) powinno zawierać marginesy, ale nie działało zgodnie z oczekiwaniami, gdy próbowałem w Chrome.

50*(1-ratio) pochodzi z:

Szerokość Okna: W = 100%

Szerokość elementu (w %): w = 100 * elementWidthInPixels/windowWidthInPixels

Aby obliczyć wyśrodkowany lewy:

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

To jest świetne. Dodałem funkcję callback

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

To, co mam tutaj, to metoda" center", która zapewnia, że element, który próbujesz wyśrodkować jest nie tylko "stałe" lub "absolutne" pozycjonowanie, ale także zapewnia, że element, który centrujesz jest mniejszy niż jego rodzic, ten centruje i element względem jest rodzicem, jeśli rodzic elementów jest mniejszy niż sam element, to splądruje DOM do następnego rodzica i wyśrodkuje go względem tego.

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

Używam tego:

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

Proszę użyć tego:

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

Dostajesz to słabe Przejście, ponieważ dostosowujesz pozycję elementu za każdym razem, gdy dokument jest przewijany. To, co chcesz, to użycie stałego pozycjonowania. Próbowałem tej wtyczki fixed center wymienionej powyżej i wydaje się, że rozwiązuje problem ładnie. Stałe pozycjonowanie pozwala wyśrodkować element raz, a właściwość CSS zadba o utrzymanie tej pozycji za każdym razem, gdy przewijasz.

Oto moja wersja. Mogę to zmienić Po spojrzeniu na te przykłady.

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

Nie potrzeba jquery do tego

Użyłem tego do wyśrodkowania elementu Div. Styl Css,

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

Element otwarty

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

});

MOJA AKTUALIZACJA DO ODPOWIEDZI TONY ' EGO L To jest zmodyfikowana wersja jego odpowiedzi, którą teraz używam religijnie. Pomyślałem, że podzielę się nim, ponieważ dodaje nieco więcej funkcjonalności w różnych sytuacjach, które możesz mieć, takich jak różne typy position lub chce tylko poziomego/pionowego centrowania, a nie obu.

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

W moim <head>:

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

Przykłady użycia:

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

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

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

Działa z dowolnym typem pozycjonowania i może być używany w całym Twoim cała witryna jest łatwa, a także łatwo przenośna do każdej innej witryny, którą tworzysz. Koniec z irytującymi obejściami, aby odpowiednio wyśrodkować coś.

Mam nadzieję, że jest to przydatne dla kogoś tam! Smacznego.

Wiele sposobów na to. Mój obiekt jest ukryty za pomocą display: none tylko wewnątrz tagu BODY, aby pozycjonowanie było względem ciała. Po użyciu $("#object_id").show () , wywołuję $("#object_id").centrum()

Używam position: absolute ponieważ jest możliwe, szczególnie na małym urządzeniu mobilnym, że okno modalne jest większe niż okno urządzenia, w którym to przypadku część treści modalnych może być niedostępna, jeśli pozycjonowanie naprawione.

Oto mój smak oparty na odpowiedziach innych i moich specyficznych potrzebach:

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

Normalnie robiłbym to tylko za pomocą CSS... ale skoro zapytałeś jak to zrobić z jQuery...

Następujący kod Wyśrodkowuje div zarówno poziomo, jak i pionowo wewnątrz kontenera :

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

(Zobacz też this Fiddle)

CSS solution Tylko w dwóch wierszach

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

}

For only horizontal align, change

margin: 0 auto;

I dla pionu, zmiana

margin: auto 0;

Nie polecam używania jQuery do wyśrodkowania kontenera, ponieważ jest zbyt ciężki do obliczenia i zależy od JavaScript. Na przykład, jeśli projektujesz prostą stronę, czy będziesz musiał załadować jQuery tylko po to, aby wyśrodkować węzeł elementu "div"?

Poniższy kod rozwiązuje zaproponowany problem przy użyciu funkcji "table". Jest dokładnie obliczony bez powodowania żadnego problemu z wyświetlaniem:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Centering issue</title>
        <style>
            html,body {
                padding: 0;
                margin: 0;
                height: 100%
            }
            .outer {
                display: table;
                width: 100%;
                height: 100%;
                border-collapse: collapse
            }
            .inner {
                display: table-cell;
                vertical-align: middle
            }
            #sample {
                margin: 0 auto;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                background: #ccc
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <div id="sample">Sample</div>
            </div>
        </div>
    </body>
</html>

Następny rozwiązuje ten sam zaproponowany problem przy użyciu nowej koncepcji flexbox. To także dokładnie obliczony, nie powodując żadnych problemów z wyświetlaniem. Wolę dyspozycję " tabelkową "(poprzednią) zamiast tego rozwiązania, ponieważ ma lepszą kompatybilność z bardzo starymi przeglądarkami, a co za tym idzie, obejmuje jeszcze więcej klientów bez żadnego problemu.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Centering issue</title>
        <style>
            html,body {
                padding: 0;
                margin: 0;
                height: 100%
            }
            .centerer {
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 100%
            }
            #sample {
                margin: 0 auto;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                background: #ccc
            }
        </style>
    </head>
    <body>
        <div class="centerer">
            <div id="sample">Sample</div>
        </div>
    </body>
</html>

Bye

Możesz użyć właściwości CSS translate:

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

Przeczytaj ten post Po Więcej Szczegółów.

Dlaczego nie używasz CSS do centrowania div?

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