CSS - Centrer une page dans la fenêtre

Comment centrer une boîte dans la fenêtre du navigateur

lundi 23 janvier 2006 par André Vincent

Techniques pour centrer le contenu d’une page dans une fenêtre à l’aide des feuilles de styles.

Sommaire

Mise à jour de cet article effectuée le lundi 23 janvier 2006 : simplification du centrage horizontal ET vertical.

Le code (X)HTML étant le suivant :

<body>
        <div id="page">
                <h1>Bonjour</h1>
                <p>chez vous...</p>
        </div>
</body>

Télécharger

Centrer horizontalement

Pour centrer horizontalement le contenu d’une page dans la fenêtre du navigateur en CSS, il suffit d’assigner une largeur fixe ou relative à #page, et de lui donner des marges auto :

#page { 
        width: 500px; /* ou width:70%; ou width:20em; */
        margin-left: auto; 
        margin-right: auto; 
        }

Télécharger

La boîte <div id=« page »> sera centrée proprement dans <body>.

Maheureusement, Internet Explorer pour Windows ne comprend pas cette directive logique et il faut tricher.

Pour que ça fonctionne sous toutes les versions de navigateurs, il faut aussi assigner à body la propriété text-align : center.

Donc :

body { 
        text-align: center; 
        }

Télécharger

Mais comme cette propriété est héritée, tous les éléments à l’intérieur de body seront aussi centrés. Il faut donc rétablir l’alignement à gauche du texte pour <div id=« page »> et tous les éléments qu’il contient. Ce qui nous donne :

#page { 
        width: 500px;
        margin-left: auto; 
        margin-right: auto; 
        text-align: left;
        }

Télécharger

Voir : Centrer horizontalement - exemple 1.

Une autre technique, moins intuitive, mais qui fonctionne aussi fort bien, consiste à placer de façon absolue le côté gauche de la boîte au centre de la fenêtre, puis ensuite de décaler la boîte vers la gauche de la moitié de sa largeur [width + (2 x border) + (2 x padding)].

#page { 
        position: absolute;
        left: 50%; 
        width: 500px;
        padding: 15px;
        border: 1px dashed #333;
        margin-left: -266px;
}

Télécharger

Cette méthode est un peu plus restricitve car

elle exige que la largeur de la boîte soit fixée avec des valeurs absolues (px, mm, etc…)
à cause du modèle de boîte particulier de Internet Explorer 5.x sous Windows, il faut ajouter une division (#contenu dans notre exemple) à l’intérieur de #page pour prendre en compte l’épaisseur de la bordure (border) et l’espace entre le texte et la bordure (padding).

Ce qui donne ceci pour le code HTML :

<div id="page">
        <div id="contenu">
                <h2>Centrer...</h2>
                <p>La boîte...</p>
        </div> 
</div>

Télécharger

Et ceci pour le code CSS :

 #page {
        position: absolute;
        left: 50%;
        width: 500px;
        margin-left: -250px;
        margin-top: 30px;
 }
 #contenu { margin: 1em; }

Télécharger

Voir : Centrer horizontalement - exemple 2.

Voilà pour le centrage horizontal.

Centrer horizontalement ET verticalement

Pour centrer horizontalement et verticalement une boîte de dimension fixe dans une fenêtre, nous allons pousser un peu plus loin la méthode que nous venons d’explorer.

Nous utiliserons le même code HTML que dans l’exemple précédent :

<div id="page">
        <div id="contenu">
                <h1>Bonjour</h1>
                <p>chez vous...</p>
        </div> 
</div>

Télécharger

Et ceci pour le code CSS :

   #page   
   {
     position: absolute;
     width: 300px;        /* selon la largeur voulue */
     margin-left: -150px; /* moitie de width */
     left: 50%;           /* constant, toujours 50% */
     height: 120px;       /* selon la quantite de texte */
     margin-top: -60px;   /* moitie de height */
     top: 50%;            /* constant, toujours 50% */
     border: 1px solid #333;
     background-color: #eee;
   }
   #contenu { margin: 1em; }

Télécharger

Voir : Centrer une boîte de dimension fixe.

Cette dernière méthode est particulièrement simple pour un contenu de dimension fixe comme une image, une vidéo ou une animation de type Flash.

Par contre, si nous désirons que la dimension de la boîte soit fluide ou élastique et puisse se redimensionner en fonction d’un contenu textuel et puisse produire un effet de zoom avec l’augementation du corps du texte, tout en restant centré horizontalement et verticalement, il faudra indiquer des valeurs relatives, comme ceci :

    #page
    {
      position: absolute;
      width: 12em;        /* selon la largeur voulue */
      margin-left: -6em;  /* moitie de width */
      left: 50%;          /* constant, toujours 50% */
      height: 8em;       /* selon la quantite de texte */
      margin-top: -4em;   /* moitie de height */
      top: 50%;           /* constant, toujours 50% */
      border: 1px solid #333;
      background-color: #eee;
    }
   #contenu { margin: 1em; }

Télécharger

Voir : Centrer une boîte de dimension variable et « zoomable » (élastique).

Voir aussi une autre méthode un peu plus tordue :

Remarque s’appliquant aux diverses méthodes précédentes : Le positionnement absolu en % pour top ne fonctionne pas avec Internet Explorer Mac. Heureusement, ce navigateur est en voie de disparition. Il existe bien une bidouille (hack) pour régler ça, mais ça déborderait largement les propos de cet article.

(Inspiré librement de :

http://bluerobot.com/web/css/center…