Comment conserver un div flottant centré sur le redimensionnement de la fenêtre (jQuery/CSS)

Question

Existe-t-il un moyen (sans se lier à l'événement window.resize) de forcer un DIV flottant à se recentrer lorsque la fenêtre du navigateur est redimensionnée?

Pour expliquer, j'imagine que le pseudocode ressemblerait à quelque chose comme:

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

MISE À JOUR

Ma requête ayant reçu une réponse ci-dessous, je voulais poster le résultat final de ma quête - une La méthode d'extension jQuery vous permet de centrer n'importe quel élément du bloc - espérons que cela aidera aussi quelqu'un d'autre.

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

Utilisation:

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

Answer 1

Ceci est facile à faire avec CSS si vous avez un div de taille fixe:

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

Le problème, bien sûr, est que les éléments de taille fixe ne sont pas idéales.

Answer 2

Essayez this little article à propos horizontal et vertical de centrage. Il est un peu vieux et a quelques hacks mais vous devriez être en mesure d'élaborer un code de test.

Answer 3

La façon la plus simple serait avec le code CSS suivant:

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

La ligne clé du code CSS ci-dessus est la "margin: 0 auto;" qui indique au navigateur de définir automatiquement les marges gauche/droite pour maintenir le div centré sur la page, même lorsque vous redimensionnez la fenêtre du navigateur.