Come mantenere un div fluttante centrato sul ridimensionamento della finestra (jQuery/CSS)

Question

C'è un modo (senza vincolarsi all'evento window.resize) per forzare un DIV mobile a ricentrarsi su se stesso quando la finestra del browser viene ridimensionata?

Per aiutare a spiegare, immagino lo pseudocodice sarebbe simile:

div.left = 50% - (div.width/2) 
div.top = 50% - (div.height/2) 

UPDATE

La mia domanda essendo stato risposto di seguito, ho voluto postare il risultato finale della mia ricerca - un Metodo di estensione jQuery che ti consente di centrare qualsiasi elemento di blocco - spero che aiuti anche qualcun altro.

jQuery.fn.center = function() { 
    var container = $(window); 
    var top = -this.height()/2; 
    var left = -this.width()/2; 
    return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' }); 
} 

Usage:

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

Answer 1

Questo è facile da fare con i CSS, se si dispone di un div dimensione fissa:

.keepcentered { 
    position: absolute; 
    left:  50%;  /* Start with top left in the center */ 
    top:   50%; 
    width:  200px;  /* The fixed width... */ 
    height:  100px;  /* ...and height */ 
    margin-left: -100px;  /* Shift over half the width */ 
    margin-top: -50px;  /* Shift up half the height */ 
    border: 1px solid black; /* Just for demo */ 
} 

Il problema, naturalmente, è che gli elementi di dimensione fissa non sono ideali.

Answer 2

Prova this little article circa orizzontale e verticale di centraggio. È un po 'vecchio e ha alcuni hack ma dovresti essere in grado di elaborare un codice di test da esso.

Answer 3

Il modo più semplice sarebbe quella con il seguente codice CSS:

#floating-div { 
    width: 50%; 
    border: 1px solid gray; 
    margin: 0 auto; 
} 

La linea fondamentale del codice CSS sopra è il "margin: 0 auto;" che dice al browser di impostare automaticamente i margini sinistro/destro per mantenere il div centrato sulla pagina, anche quando ridimensionate la finestra del browser.