Centrer ses pages dans la fenêtre du navigateur de l'internaute offre bien souvent un grand nombre d'avantages! En effet, outre le rendu professionnel et les qualités esthétiques qu'il apporte à votre site, un bon centrage vous permet de proposer le consensus graphique le plus efficace par rapport aux multiple résolutions d'écran sur lesquelles vos pages sont susceptible d'être affichées.

Les feuilles de style sont indispensables pour mener à bien ce type de tache, voilà comment faire:

Centrage horizontal

Initialisez la propriété margin du div votre conteneur à "auto" dans vos CSS sans oublier d'indiquer la largeur de votre conteneur (width) :

#monConteneur {
width: 1000px; /* largeur de mon conteneur */
margin: auto; /* centrage horizontal de mon conteneur */
}

Puis appliquez simplement l'identifiant adéquat dans la balise <div> de votre page HTML

<div id="monConteneur">Ceci est le conteneur de mon site</div>

Vous aurez également besoin d'ajouter un "text-align: center;" dans le body de votre feuille de style pour que Internet Explorer 6 veuille bien centrer votre site.

body {
text-align: center; /* correction du bug de centrage sur IE6 */
}

Centrage horizontal et vertical


Pour centrer votre site de façon absolu (aussi bien centrer horizontalement que verticalement), il va falloir ruser un peu! On va donc  appliquer la valeur "absolute" à la propriété "position" de notre conteneur global, ce qui va nous permettre de positionner le div du conteneur par rapport aux limites de la fenêtre du navigateur de l'utilisateur.

Ensuite, après avoir définit la largeur et la hauteur du div ("width" et "height"), on va intialiser les propriétés "left" et "top" à 50% afin d'aligner le coin gauche du conteneur au centre de la page.

Enfin pour centrer le bloc, on applique une valeur négative aux propriétés "margin-left" et "margin-top" qui correspond à la moitié de la largeur et de la hauteur, comme sur l'exemple suivant:

#monConteneur{
position:absolute;
width: 1000px;
height: 600px;
left: 50%;
top: 50%;
margin-top: -300px; /* moitié de la hauteur */
margin-left: -500px; /* moitié de la largeur */
}

Pour finir, on appelle le style précédemment définit dans notre page HTML avec le code suivant:

<div id="monConteneur">Ceci est le conteneur de mon site</div>

Comme pour le cas précédent, vous aurez devrez ajouter un "text-align: center;" dans le body de votre feuille de style pour que Internet Explorer 6 veuille bien centrer votre site.

body {
text-align: center; /* correction du bug de centrage sur IE6 */
}

Ressources

http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Pour approfondir le positionnement de vos éléments en css:

http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
http://openweb.eu.org/articles/initiation_flux/