Meilleure technique pour centrer un élément en utilisant la position relative/absolue?

Question

J'essaie d'obtenir un centrage croisé cohérent quand je mets la propriété position de l'élément parent à relative et la position de l'enfant à l'absolu (l'enfant est l'élément que j'essaye de centrer)

Actuellement dans Firefox, il est pas exactement centre, mais iE6/7 est (échantillon de ce que j'utilise ci-dessous)

#wrapper { min-width:995px; position: relative; } 
#wrapper2 { margin:0 auto; z-index: 0; position: absolute; } 

Answer 1

Essayez-vous horizontall centre, à la verticale du centre ou les deux?

Dans les deux cas, l'utilisation de la marge et de l'absolu est incompatible. La position absolue le sort du flux normal. Si vous enlevez la position absolue, la div interne est centrée horizontalement correctement. Quoi que vous vouliez faire, le centrage (en particulier le centrage vertical) est un énorme problème en CSS pur, en particulier si le support IE6 est requis. Si vous devez utiliser le positionnement absolu sur le div interne, vous devez pratiquement compter sur le positionnement des pixels, ce qui signifie connaître les tailles fixes des divs externes et internes (sauf quelques cas d'angle).

Answer 2

Si vous êtes intéressé par une approche jQuery, j'ai utilisé il y a les suivants quelques semaines:

$(window).load(function() { 
    $("ul.recent-list div img").each(function() { 
     var moveX = ($(this).width()/2 * -1) + 18; 
     var moveY = ($(this).height()/2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS 
     $(this).css({'top' : moveY, 'left' : moveX}); 
    }); 
}); 

je devais prendre une image d'une taille inconnue et placez-le dans une « fenêtre » de 36x36px de sorte que seule la zone de 36 pixels carrés de l'image était visible à travers la fenêtre <div>. Le (window).load était nécessaire au lieu de (document).ready car Safari ne peut pas utiliser les fonctions width() et height() si aucun attribut width/height n'est défini sur l'image dans document.ready. Comme mes images étaient de dimensions variables, j'ai dû utiliser window.load à la place.