Come faccio a impostare un <div>al centro dello schermo usando jQuery?

Mi piace aggiungere funzioni a jQuery quindi questa funzione sarebbe di aiuto:

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

Ora possiamo semplicemente scrivere:

$(element).center();

Demo: violino (con parametro aggiunto)

Ho messo un plugin jquery qui

VERSIONE MOLTO BREVE

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

VERSIONE BREVE

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

Attivato da questo codice:

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

VERSIONE PLUGIN

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

Attivato da questo codice:

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

è giusto ?

AGGIORNARE :

Da trucchi CSS

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

Consiglierei l' utilità di posizione jQueryUI

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

che ti offre molte più possibilità rispetto al solo centraggio ...

Ecco il mio tentativo. Ho finito per usarlo per il mio clone Lightbox. Il vantaggio principale di questa soluzione è che l'elemento rimarrà centrato automaticamente anche se la finestra viene ridimensionata, rendendolo ideale per questo tipo di utilizzo.

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

Puoi usare CSS da solo per centrare in questo modo:

Esempio di lavoro

.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() ti permette di fare calcoli di base in css.

Documentazione MDN per la calc()
tabella di supporto del browser

Mi sto espandendo sulla grande risposta data da @TonyL. Sto aggiungendo Math.abs () per racchiudere i valori e prendo anche in considerazione il fatto che jQuery potrebbe trovarsi in modalità "nessun conflitto", come ad esempio WordPress.

Ti consiglio di avvolgere i valori superiore e sinistro con Math.abs () come ho fatto di seguito. Se la finestra è troppo piccola e la finestra di dialogo modale ha una casella di chiusura in alto, ciò eviterà il problema di non vedere la casella di chiusura. La funzione di Tony avrebbe avuto valori potenzialmente negativi. Un buon esempio di come si ottengono valori negativi è se si dispone di una grande finestra di dialogo centrata ma l'utente finale ha installato diverse barre degli strumenti e / o aumentato il suo carattere predefinito - in tal caso, la casella di chiusura in una finestra di dialogo modale (se in alto) potrebbe non essere visibile e cliccabile.

L'altra cosa che faccio è velocizzare un po 'la cache memorizzando l'oggetto $ (window) in modo da ridurre gli attraversamenti DOM aggiuntivi e utilizzare un CSS cluster.

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

Per usare, dovresti fare qualcosa del tipo:

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

Vorrei usare la funzione dell'interfaccia utente jQuery position .

Guarda la demo funzionante .

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

Se ho un div con ID "test" da centrare, il seguente script centrerebbe il div nella finestra sul documento pronto. (i valori predefiniti per "my" e "at" nelle opzioni di posizione sono "center")

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

Vorrei correggere un problema.

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

Il codice sopra non funzionerà nei casi in cui this.height(supponiamo che l'utente ridimensioni lo schermo e che il contenuto sia dinamico) e scrollTop() = 0, ad esempio:

window.heightè 600
this.heightè650

600 - 650 = -50  

-50 / 2 = -25

Ora la casella è centrata sullo -25schermo.

Questo non è testato, ma qualcosa del genere dovrebbe funzionare.

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

Non credo che avere una posizione assoluta sarebbe la cosa migliore se si desidera un elemento sempre centrato nel mezzo della pagina. Probabilmente vuoi un elemento fisso. Ho trovato un altro plug-in di centraggio jquery che utilizzava il posizionamento fisso. Si chiama centro fisso .

Il componente di transizione di questa funzione ha funzionato davvero male per me in Chrome (non testato altrove). Avrei ridimensionato un po 'la finestra e il mio elemento si sarebbe spostato lentamente, cercando di raggiungerlo.

Quindi la seguente funzione commenta quella parte. Inoltre, ho aggiunto i parametri per passare ai booleani x & y opzionali, se si desidera centrare verticalmente ma non orizzontalmente, ad esempio:

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

Per centrare l'elemento in relazione alla finestra del browser (finestra), non usare position: absolute, il valore di posizione corretto dovrebbe essere fixed( valore assoluto: "L'elemento è posizionato rispetto al suo primo elemento antenato posizionato (non statico)").

Questa versione alternativa del plug-in centrale proposto utilizza "%" anziché "px", quindi quando si ridimensiona la finestra il contenuto è centrato:

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

Devi mettere margin: 0per escludere i margini del contenuto dalla larghezza / altezza (dal momento che stiamo usando la posizione fissa, avere margini non ha senso). Secondo il documento jQuery l'utilizzo .outerWidth(true)dovrebbe includere i margini, ma non ha funzionato come previsto quando ho provato in Chrome.

Il 50*(1-ratio)proviene da:

Larghezza della finestra: W = 100%

Larghezza elemento (in%): w = 100 * elementWidthInPixels/windowWidthInPixels

Loro per calcolare la sinistra centrata:

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

Questo è fantastico Ho aggiunto una funzione di richiamata

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

Modificare:

Se la domanda mi ha insegnato qualcosa, è questa: non cambiare qualcosa che già funziona :)

Sto fornendo una copia (quasi) testuale di come è stata gestita su http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - è pesantemente compromessa per IE ma fornisce un modo CSS puro di rispondendo alla domanda:

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

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

Ho eseguito questo tramite browser e sembra che vada bene; se non altro, terrò l'originale qui sotto in modo che la gestione della percentuale di margine come dettato dalle specifiche CSS veda la luce del giorno.

Originale:

Sembra che sono in ritardo alla festa!

Ci sono alcuni commenti sopra che suggeriscono che questa è una domanda CSS - separazione delle preoccupazioni e tutto. Permettetemi di prefigurarlo dicendo che CSS si è davvero sparato ai piedi su questo. Voglio dire, quanto sarebbe facile farlo:

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

Giusto? L'angolo in alto a sinistra del contenitore si troverebbe al centro dello schermo e con margini negativi il contenuto riapparirà magicamente nel centro assoluto della pagina! http://jsfiddle.net/rJPPc/

Sbagliato! Il posizionamento orizzontale è OK, ma in verticale ... Oh, capisco. Apparentemente in CSS, quando si impostano i margini superiori in%, il valore viene calcolato come percentuale sempre relativa alla larghezza del blocco contenitore . Come mele e arance! Se non ti fidi di me o del documento di Mozilla, gioca con il violino qui sopra regolando la larghezza del contenuto e lasciati stupire.

Ora, con CSS come pane e burro, non avevo intenzione di mollare. Allo stesso tempo, preferisco le cose facili, quindi ho preso in prestito i risultati di un guru CSS ceco e l'ho trasformato in un violino funzionante. Per farla breve, creiamo una tabella in cui l'allineamento verticale è impostato al centro:

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

E poi la posizione del contenuto è messa a punto con un buon vecchio margine: 0 auto; :

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

Fiddle di lavoro come promesso: http://jsfiddle.net/teDQ2/

Quello che ho qui è un metodo "centrale" che assicura che l'elemento che stai tentando di centrare non sia solo di posizionamento "fisso" o "assoluto", ma assicura anche che l'elemento che stai centrando sia più piccolo del suo genitore, questo centra e l'elemento relativo a è genitore, se l'elemento genitore è più piccolo dell'elemento stesso, saccheggerà il DOM al genitore successivo e lo centrerà rispetto a quello.

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

io uso questo:

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

Si prega di utilizzare questo:

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

stai ottenendo quella transizione scadente perché stai regolando la posizione dell'elemento ogni volta che il documento viene fatto scorrere. Quello che vuoi è usare il posizionamento fisso. Ho provato quel plug-in a centro fisso elencato sopra e che sembra risolvere il problema in modo corretto. Il posizionamento fisso ti consente di centrare un elemento una volta e la proprietà CSS si occuperà di mantenere quella posizione per te ogni volta che scorri.

Ecco la mia versione Potrei cambiarlo dopo aver visto questi esempi.

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

Non c'è bisogno di jquery per questo

L'ho usato per centrare l'elemento Div. Css Style,

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

Elemento aperto

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

});

IL MIO AGGIORNAMENTO A TONY LA RISPOSTA Questa è la versione modificata della sua risposta che uso religiosamente ora. Ho pensato di condividerlo, in quanto aggiunge leggermente più funzionalità ad esso per varie situazioni che potresti avere, come diversi tipi di positiono solo centraggio orizzontale / verticale piuttosto che entrambi.

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

Nel mio <head> :

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

Esempi di utilizzo:

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

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

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

Funziona con qualsiasi tipo di posizionamento e può essere utilizzato facilmente in tutto il tuo sito, nonché facilmente trasportabile su qualsiasi altro sito che crei. Niente più fastidiose soluzioni alternative per centrare correttamente qualcosa.

Spero che questo sia utile per qualcuno là fuori! Godere.

Ci sono molti modi per farlo. Il mio oggetto viene tenuto nascosto con la visualizzazione: nessuno è solo all'interno del tag BODY in modo che il posizionamento sia relativo al BODY. Dopo aver usato $ ("# object_id"). Show () , chiamo $ ("# object_id"). Center ()

Uso la posizione: assoluto perché è possibile, soprattutto su un piccolo dispositivo mobile, che la finestra modale sia più grande della finestra del dispositivo, nel qual caso parte del contenuto modale potrebbe essere inaccessibile se il posizionamento fosse fisso.

Ecco il mio sapore basato sulle risposte degli altri e sui miei bisogni specifici:

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

È possibile utilizzare la translateproprietà CSS :

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

Leggi questo post per maggiori dettagli.

Normalmente, lo farei solo con CSS ... ma poiché ti ho chiesto un modo per farlo con jQuery ...

Il codice seguente centra un div sia orizzontalmente che verticalmente all'interno del suo contenitore:

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

(vedi anche questo violino )

Soluzione CSS Solo in due righe

Centralizza il div interno in orizzontale e in verticale.

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

}

solo per l'allineamento orizzontale, cambia

margin: 0 auto;

e per verticale, cambia

margin: auto 0;

Basta dire: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

Perché non usi i CSS per centrare un div?

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