Bonsoir,
Il faut prendre en compte l'ancienneté: autrefois un grand nombre de navigateurs (pour ne pas dire tous) n'avaient qu'un seul point de repère : la position X-Y = 0, c'est à dire le pixel supérieur gauche de l'affichage de la page. Ça s'étendait par conséquent à la largeur (coté supérieur uniquement) et la hauteur (coté gauche uniquement). Les marges négatives allaient assez bien dans ces deux sens mais se dérobaient à tout contrôle dans d'autres sens (margin-right ou bottom négative).
Il y avait, si je me souviens bien, un fameux petit logo "trop beau pour IE" qui circulait sur de nombreux sites - Il était sensé se trouver placé en bas à gauche de la page en position fixe mais se retrouvait en plein milieu de page sur les mauvais navigateurs de l'époque.
Les marges négatives ont perdu peut-être un peu de leur crédibilité à ce moment là et furent sans doute déconseillées par les "pros"
Actuellement, ça fonctionne bien partout.
D'ailleurs je reproduis de mémoire (à peu près) un ancien code d'Alsacréations pour centrer un bloc sur une page (de mémoire ça doit dater d'au moins 6 ou 7 ans) l'intéressant dans ce cas c'est que ça s'appuie sur les deux bords réputés "fiables" jadis (haut et gauche de page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Center un bloc avec marges négatives</title>
<style type="text/css">
html, body {
background: #02009D;
margin: 0; padding:0;
height: 100%; /* totalité de la page quelle que soit la taille de l'écran */
}
div {
background: #FFC900;
width: 500px; height: 300px;
top: 50%; left: 50%;
margin-left: -250px; /*(demi largeur du bloc)*/
margin-top: -150px; /*(demi hauteur du bloc)*/
position: relative;
}
</style>
</head>
<body>
<div><!--Super cool les marges négatives--></div>
</body>
</html>
Copiez / collez et vérifiez en modulant le format d'affichage !
