ToutSurTout.biz
Centrer un div : position:fixed


Centrer un div : position:fixed

Voici un moyen, comme un autre, de centrer un div en utilisant l'attribut position:fixed. Pour bref rappel, cet attribut permet à un div de suivre la page, même si l'utilisateur "scroll" celle-ci. Ceci devrait fonctionner sur les navigateurs de type Firefox, Opera, Internet Explorer.. Voici un exemple :

<div style="position:fixed; top:155px;opacity:none;background-color:blue;color:white;width:300px;border:solid 3px #0E2235;height:250px; left:50%; top:50%;margin-top:-125px; margin-left:-150px;opacity:0.8">Ceci est un test</div>

Il n'est pas question d'expliquer ici pendant des heures comme fonctionne les traditionnelles color;background-color;border... Ils ne sont présents que pour un besoin esthétique.
Néanmoins, opacity est utile pour modifier l'opacité (transparence) d'un élément. Une valeur de opacity:1.0 rend le div parfaitement opaque, il n'est pas possible de voir ce qu'il y a "derrière". Une valeur de 0.0 le rend invisible.
# position:fixed : Permet à notre div de prendre cet aspect "scroll".
# left:50% :Nous souhaitons que le div soit centré horizontalement. Bien entendu left tout seul est inutile, puis-ce que le div a une certaine largeur, il faut alors repositionner celui-ci en fonction de cette largeur.
# margin-left:-150px : Notez bien le signe négatif -. Le margin-left va "tirer le div" de 150px vers la gauche, pour que celui-ci soit bel et bien centré. La largeur ( width ) du div est de 300px. Pour trouver la valeur de margin-left, il suffit de diviser la width par 2. Exemple : 300px ( width ) /  - 2 = -150px = margin-left
# top:50%. Tout pareil, l'attribut top positionne le div en milieu de page ( vertical ) . Seul celui-ci ne centre pas le div, il va falloir utiliser margin-top.
# margin-top: -125px : Puis-ce que la hauteur de notre div est de 250px; utilisons un margin-top de -125px, afin de le faire un peu "remonter".