Centrare un div verticalmente e orizzontalmente usando jQuery

Sto usando questo script per centrare il mio div orizzontalmente e verticalmente.

Quando la pagina viene caricata, il div viene centrato verticalmente, non in orizzontale finché non ridimensiono il browser.

Che cosa sto facendo di sbagliato?

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

    Di solito uso questa “tecnica”:

     $(function() { $('.className').css({ 'position' : 'absolute', 'left' : '50%', 'top' : '50%', 'margin-left' : -$('.className').width()/2, 'margin-top' : -$('.className').height()/2 }); }); 

    AGGIORNARE:

    Sto aggiornando la soluzione, come suggerito dall’utente Fred K , usando .outerWidth() e .outerHeight() per avere un centraggio più preciso.

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

    Alcune note aggiuntive dalla documentazione di jQuery ( .outerWidth() , .outerHeight() ):

    • Il numero restituito dalle API relative alle dimensioni, incluso .outerWidth (), potrebbe essere frazionario in alcuni casi. Il codice non dovrebbe presumere che sia un numero intero. Inoltre, le dimensioni potrebbero non essere corrette quando la pagina viene ingrandita dall’utente; i browser non espongono un’API per rilevare questa condizione.

    • Il valore riportato da .outerWidth () non è garantito per essere accurato quando il genitore dell’elemento è nascosto. Per ottenere un valore accurato, devi prima mostrare il genitore, prima di usare .outerWidth ().


    AGGIORNAMENTO 2:

    Un semplice aggiornamento per mostrare come si può usare this nel metodo css() nel caso in cui ci siano più elementi con lo stesso tag di class con dimensioni diverse.

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

    usa questo per centrare:

     $.fn.center = function () { this.css("position","absolute"); this.css("top", ( $(window).height() - this.height() ) / 2 + "px"); this.css("left", ( $(window).width() - this.width() ) / 2 + "px"); return this; } $('yourElem').center(); 

    Avvolgi il codice del gestore in una funzione in modo che tu possa chiamare tale funzione sia sul caricamento della pagina sia sul gestore per $(window).resize()

     /* use as handler for resize*/ $(window).resize(adjustLayout); /* call function in ready handler*/ $(document).ready(function(){ adjustLayout(); /* your other page load code here*/ }) function adjustLayout(){ $('.className').css({ position:'absolute', left: ($(window).width() - $('.className').outerWidth())/2, top: ($(window).height() - $('.className').outerHeight())/2 }); } 

    In relazione al tuo snippet di codice, devi prima impostare la posizione:

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

    Forse potresti impostare l’attributo position tramite uno stile CSS statico .

    basato sulla risposta di @ dimi, funziona meglio con più elementi

     $(".className").each( function () { $( this ).css("position","absolute"); $( this ).css("left","50%"); $( this ).css("margin-left", - $( this ).outerWidth()/2 ); $( this ).css("top","50%"); $( this ).css("margin-top", - $( this ).outerHeight()/2 ); return this; } ); 

    Io uso questo plugin JQuery.center per centrare i miei elementi DOM. Il codice sarà qualcosa del genere:

     $("#child").center() 

    Il codice precedente sarà centrato rispetto al suo genitore diretto, se hai bisogno di centrare rispetto ad un altro genitore, sarà:

     $("#child").center($("#parent")) 

    Ci sono opzioni personalizzate, se hai bisogno di altre forms di centralizzazione.

    Recentemente ho cercato di posizionare una casella nel mezzo di una finestra del browser. Ho creato il codice qui sotto. Lo script jQuery è piuttosto lungo perché ho preso in considerazione tutti i paddings e i margini dei tag html e body, se qualcuno li ha impostati. Se non ci si preoccupa degli sfondi, devono essere impostati solo winwidth, winhight, toppx, leftpx e “#container”. Il resto può essere cancellato.

        Test of centre of container      

    Example text


    EDIT: Ho trovato una soluzione molto migliore per questo sul sito Web CSS Tricks e utilizza solo CSS :). Il codice è qui sotto:

         Test centring!     

    Example text
    Example Text

    il mio div con centro di class deve essere centrato orizzontalmente nel mezzo e la sua posizione è fissa. Io uso questo piccolo codice per farlo accadere:

     $(window).on('resize load', function () { $('.center').each(function () { $(this).css({ 'margin-left': ($('body').width() - $(this).width()) / 2 }); }); }); 

    puoi usare le stesse tattiche anche per l’allineamento orizzontale. Dai un’occhiata che si occupa contemporaneamente di caricare e ridimensionare gli eventi, quindi questo div è sempre nel mezzo.

    Puoi usare quel plugin è molto semplice da usare https://github.com/tenbullstech/jquery-make-me-center

     $("div.box").makemecenter();