Comment centrer une page dans la fenêtre du navigateur avec CSS

30 juillet 2008

Pour centrer une page, il faut dans la page HTML mettre tout le contenu de la page dans une balise div identifié par id= »conteneur ». Puis dans le code css déclarer margin:auto;.

Il faut également avoir un des doctypes suivant :

XHTML 1.0 STRICT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ou

XHTML 1.0 TRANSITIONAL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	

ou

XHTML 1.0 FRAMESET

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

ou

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ou

HTML 4.0 STRICT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
ou

HTML 4.0 TRANSITIONNAL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">

ou

HTML 4.0 FRAMESET

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
	   "http://www.w3.org/TR/html4/frameset.dtd">

ATTENTION LE DOCTYPE DOIT INCLURE UNE URI COMPLETE
Si il n'y a pas d'URI complète en fin de balise ou s'il n'y a pas de doctype cela ne marche pas.

Code HTML ou XHTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <head>
     </head>
     <body>
          <div id="conteneur">
          Tout le code de la page
          </div>
     </body>
</html>

Code CSS :

body{
    margin:0;
    padding:0;
    }
#conteneur{
    margin:auto;
   padding:auto;
    }