CSS

Centrer les éléments ou un site web en CSS

Il existe plusieurs méthodes d'alignement et de centrage en CSS, qui dépendent de la structure des balises (bloc, en-ligne) et le type (vertical, horizontal).

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (1295393 lectures)
Tags : css, positionnement, centrage, horizontal, vertical, vertical-align

Le centrage horizontal des éléments de type en-ligne

Vous voulez centrer horizontalement un élément de type "en-ligne" au sein d'un bloc.

La propriété CSS text-align est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur. C'est exactement ce qu'il nous faut !

Il vous suffit donc par exemple de procéder ainsi pour centrer une image au sein d'un élément <div> :

<div class="centrage"><img src="…" alt="…" /></div>

.centrage {text-align: center;}

Le centrage horizontal des éléments de type bloc

Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales.

Donnons à notre bloc l'id global :

#global {
  margin-left: auto;
  margin-right: auto;
  width: ...; /* largeur obligatoire pour être centré */
}

Note : Les marges du code fournies ci-dessus peuvent s'écrire de façon raccourcie : #global {margin: 0 auto;}

De cette manière, il équilibrera automatiquement les marges latérales.

Vous placerez votre bloc <div> conteneur dans votre code HTML :

<div id="global"></div>

Il suffit ensuite de placer le reste du contenu dans #global et votre site sera centré proprement.

Donc :

body {
  margin: 0; /* pour éviter les marges */
}

Il faudra ensuite rétablir l'alignement texte dans #global, ce qui donne :

#global {
  margin-left: auto;
  margin-right: auto;
  width: ...;
}

Attention à ne pas oublier de définir une largeur pour l'élément à centrer, sinon il ne pourra logiquement pas être centré (il occupera toute la largeur disponible, comme tous les blocs par défaut). Attention également : cette méthode de marges automatiques ne va pas centrer un bloc s'il est positionné en absolu (voir la partie ci-dessous).

N'oubliez pas le Doctype !

Attention à ne pas oublier le doctype du document (lire "DTD : comment choisir"), sinon votre page sera en mode Quirks.

Dans ce mode, Internet Explorer se comporte comme les versions antérieures à IE6, c'est à dire qu'il n'interprète pas les dimensions et les marges comme il le faudrait. Dans ce cas précis, il n'appliquerait pas le centrage à l'aide des marges automatiques.

Cas des éléments positionnés

Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.

En effet, si votre conteneur est placé dans le flux (avec des marges) et que votre contenu est positionné (absolu ou relatif), ce dernier sort du flux et donc du conteneur. Il se placera alors par rapport au dernier parent positionné : le document.

Pour éviter ce problème, il faut absolument que le conteneur soit lui-même positionné. En lui donnant une position relative, vous pouvez garder son centrage avec marges automatiques, tout en incorporant du contenu lui aussi positionné..

Exemple de conteneur prévu pour un contenu avec des éléments positionnés :

#global {
  position: relative; /* on positionne le conteneur */
  margin-left: auto;
  margin-right: auto;
  width: ...;
  text-align: left;
}

Et voilà pour le centrage horizontal

Le centrage vertical

Pour le centrage vertical, c'est une autre histoire !

Il existe un attribut vertical-align, mais il ne permet pas :

  • De positionner verticalement un texte dans un bloc quelconque (DIV, P, etc...)
  • De positionner verticalement un bloc dans un autre bloc.

Il n'est pas fait pour ça, mais en général pour aligner deux éléments l'un par rapport à l'autre. Il n'y a que dans les cellules de tableaux (ou les éléments structurés comme tels) que cette propriété aligne tout le contenu verticalement.

Là encore, il est possible de modifier l'affichage du bloc conteneur en lui conférant l'apparence et les avantages d'une cellule de tableau (car dans ce cas, l'attribut vertical-align fonctionne), et donc de déclarer ce bloc en display: table-cell; et vertical-align: middle;

Mais une fois de plus, Internet Explorer 6 et IE7 ne gèrent pas table-cell, malheureusement.

Nous allons donc utiliser une autre solution : vous trouverez toutes les techniques d'Alsacréations dans un article dédié au centrage vertical.