Utilizzo di jQuery per centrare un DIV sullo schermo

StackOverflow https://stackoverflow.com/questions/210717

Domanda

Come posso impostare <div> al centro dello schermo usando jQuery?

È stato utile?

Soluzione

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: Fiddle (con parametro aggiunto)

Altri suggerimenti

Ho inserito 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 CORTA 

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

è vero?

AGGIORNAMENTO:

Da Trucchi CSS 

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

Consiglierei 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 solo CSS 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 <=>
Tabella di supporto del browser

Sto espandendo la grande risposta data da @TonyL. Sto aggiungendo Math.abs () per racchiudere i valori e tengo anche conto che jQuery potrebbe trovarsi tra & Quot; nessun conflitto & Quot; modalità, come ad esempio in WordPress.

Ti consiglio di racchiudere 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 nella parte superiore, ciò eviterà il problema di non visualizzare 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 è accelerare 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 utilizzare la UI 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 " per centrare quindi il seguente script centrerebbe il div nella finestra sul documento pronto. (i valori predefiniti per " my " e " in " 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 riportato non funzionerà nei casi in cui this.height (supponiamo che l'utente ridimensioni lo schermo e che il contenuto sia dinamico) e scrollTop() = 0, esempio:

window.height è 600
650 è -25 

600 - 650 = -50  

-50 / 2 = -25

Ora la casella è centrata <=> fuori schermo.

Non credo che avere una posizione assoluta sarebbe meglio se vuoi 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 .

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

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

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 il passaggio nell'amplificatore x & Opzionale; y booleana, 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 rispetto 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 ridimensionate 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 inserire margin: 0 per escludere i margini del contenuto dalla larghezza / altezza (dal momento che stiamo usando la posizione fissa, avendo margini non ha senso). Secondo il documento jQuery l'uso di .outerWidth(true) dovrebbe includere i margini, ma non ha funzionato come previsto quando ho provato su Chrome.

Il 50*(1-ratio) viene da:

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

Modifica:

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

Sto fornendo una copia (quasi) integrale di come è stata gestita su http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - è pesantemente compromesso per IE ma fornisce un modo CSS puro per rispondere 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 sia 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 davvero si è 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%;
}

A destra? 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/

Errato! Il posizionamento orizzontale è OK, ma in verticale ... Oh, capisco. Apparentemente in CSS, quando si impostano i margini superiori in%, il valore viene calcolato come una 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 sopra regolando la larghezza del contenuto e lasciati stupire.

Ora, con CSS che è il mio 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 lo ha trasformato in un violino funzionante. Per farla breve, creiamo una tabella in cui vertical-align è 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 " center " il metodo che garantisce che l'elemento che si sta tentando di centrare non sia solo " fixed " oppure " assoluto " posizionamento, ma assicura anche che l'elemento che stai centrando sia più piccolo del suo genitore, questo centra e l'elemento relativo è genitore, se l'elemento genitore è più piccolo dell'elemento stesso, saccheggerà il DOM al genitore successivo e centrarlo 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');
        }
    };

Uso questo: 

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

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 scarsa transizione perché stai regolando la posizione dell'elemento ogni volta che si scorre il documento. 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. Stile 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;
}

Apri elemento 

$(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 position o volendo solo centratura orizzontale / verticale anziché 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! Godetevi.

Molti modi per farlo. Il mio oggetto viene nascosto con display: none appena all'interno del tag BODY in modo che il posizionamento sia relativo al BODY. Dopo aver usato $ (& Quot; #object_id & Quot;). Show () , chiamo $ (& Quot; #object_id & Quot;). centro ()

Uso 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 è stato corretto.

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

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, modifica 

margin: 0 auto;

e per verticale, cambia 

margin: auto 0;

È possibile utilizzare la proprietà CSS translate: 

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

Leggi questo post per maggiori dettagli.

Perché non usi i CSS per centrare un div? 

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top