Une idée d'apparence simple peut s'avérer parfois un véritable casse-tête chinois en intégration XHTML, et c'est effectivement le cas pour -simplement- centrer son site verticalement dans la page quelque soit la résolution d'écran.

Autant un centrage horizontal se fait en deux lignes CSS

margin-left:auto;
margin-right:auto;

Autant un centrage vertical... C'est une toute autre histoire.

Je vais donc proposer ici, suite à un ticket support que j'ai reçu aujourd'hui, deux possibilités qui "peuvent" être une solution, selon vos besoins.
Ceci dit, chacune possède son lot d'inconvénients, je préfère prévenir !



1 - Le concept des "margin" négatives

Dans le cas où vous connaissez précisément les dimensions du site que vous désirez centrer, il existe une solution assez farfelue qui consiste à positioner le coin haut-gauche de votre conteneur au centre de la page et définir des marges négatives égales à la moitié des dimensions de celui-ci...
...Ouf !

Respirons, hehe... ce n'est pas si méchant que ça malgré tout.

Code CSS du conteneur englobant le site entier :

#id_du_conteneur {
position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 500px;
margin-top: -250px; /* moitié de la hauteur */
margin-left: -350px; /* moitié de la largeur */
border: 1px solid black;
}


...C'est tout.

Attention toutefois ! Les marges négatives posent de vrais souçis sur certains navigateurs MAC.
(Par exemple, il arrive que vous retrouviez la page ferrée tout en haut, la moitié haute coupée en deux... Autant dire que ça ne fait pas très "pro")
Mesurez donc les conséquences avant d'opter pour cette solution !



2 - Le retour des tableaux

He... Nous savons bien tous qu'une page construite à partir de tableaux n'est pas ce qu'il y a de plus optimal, et c'est peu de le dire.
Disons surtout qu'une balise "table" est sémantiquement parlant un "tableau"... Et un tableau existe pour disposer principalement des données tabulaires, non pas pour concevoir les armatures d'un site web.
L'époque d'une page en tableau est donc révolue grâce aux recommandations du W3c
Ceci dit... Nous ne sommes pas non-plus des extrémistes, et, lorsqu'aucune autre possibilité nous est offerte pour répondre à nos attentes... Nous sommes bien obligés d'utiliser la seule technique qui marche.

La technique :
Utiliser une cellule de tableau pour y appliquer la fameuse propriété "vertical-align", qui nous permettra de centrer verticalement tout contenu à l'interieur de cette cellule... Ajoutons donc les dimensions nécessaires, le contenu du site, et ainsi de suite.

Attention !
- On ne le dira jamais assez : Cette technique n'est pas sémantiquement correcte. Disons qu'on utilise un tableau là où nous n'avons pas besoin de tableau sur le premier sens du terme.
Nous aurions préféré "body" ou un "div", qui sont effectivement plus sémantiquement corrects.
- Si jamais la compatibilité avec IE n'est pas nécessaire, remplacez donc ce tableau par un élément avec la propriété CSS "table-cell"



3 - conclusion

Evitez tant que possible de centrer un site web verticalement. C'est mieux.
Le media web n'a pas été adapté à la base pour cela, on peut dire que c'est dommage, on peut dire que c'est normal, dans tous les cas...nous ne pouvons pas faire mieux dans l'état actuel des choses.

Il existe d'autres solutions que je n'ai pas abordé, mais celles-ci sont bien trop dangereuses point de vue compatibilité des navigateurs.

Ceci étant dit : si vous avez une solution à apporter, le sujet est ouvert !

3 - conclusion

Evitez tant que possible de centrer un site web verticalement. C'est mieux.
Le media web n'a pas été adapté à la base pour cela, on peut dire que c'est dommage, on peut dire que c'est normal, dans tous les cas...nous ne pouvons pas faire mieux dans l'état actuel des choses.

Il existe d'autres solutions que je n'ai pas abordé, mais celles-ci sont bien trop dangereuses point de vue compatibilité des navigateurs.

Ceci étant dit : si vous avez une solution à apporter, le sujet est ouvert !

Merci Nicolas pour ce billet qui fait une bonne synthèse des possibilités efficaces de centrage vertical d'un site.

Toutefois je ne partage pas ta conclusion sur le principe d'éviter le centrage.

Actuellement la résolution 1024X768 représente approx 50% des visites sur mes sites. 1280x1024: 20% ; 1280x800: 9% autres résolutions supérieures à 1200: 12% soit 41% de visiteurs en résolution supérieure à 1024x768.

Pour cette proportion importante de "forte résolution", il me semble important de soigner l'apparence si on a un design fixe en hauteur. www.corallis.com ; www.roses-orard.com ....

Dans la mesure du possible, je sais que parfois cela n'est pas évitable, mais je conseille d'éviter le centrage vertical à cause des inconvénients très désagréables que cela apporte sur le support web à ce jour.

Prenons exemple sur les deux sites que vous avez cité, si je puis me le permettre, vous remarquerez que ceux-ci ne sont pas visualisables ni dans une résolution inférieure à 1024*768, ni en fênetré, ni sur tout autre support de type Pocket PC, PSP, etc...
Je n'ai pas vérifié, mais il est très probable que le bug Safari MAC apparaisse aussi.

Rajoutons à cela que le taux de fréquentation sur tel ou tel support de navigation dépendra de l'interropérabilité du site web en question.


En bref, pour reprendre ce que vous dites : Il est très dommage que le centrage vertical pose autant de souçi tant il est "important de soigner l'apparence si on a un design fixe en hauteur".
Il est certain que retrouver son site "pendu" en haut du navigateur n'est pas du plus bel effet... Je vous rejoint là dessus.

Cependant, il n'existe malheureusement pas de technique viable aujourd'hui à ma connaissance pour afficher verticalement un site sans contraintes très gênantes...


Petite parenthèse sur les autres support web : Même si ceux-ci sont très mineurs, nous ne savons jamais de quoi l'avenir est fait. Et pour prendre l'exemple sur la PSP : j'ai vu certains sites web (non axés sur le jeux video particulièrement, je précise) dont la fréquentation avec le navigateur de la PSP se faisait à hauteur de 5%, au-dessus des MAC, Linux, Opera tous OS, etc.
Comme quoi... C'est aussi très certainement du fait que ce site en particulier s'affichait correctement sur ce support.