Dans cet article, nous n'aborderons que le centrage horizontal, mais vous trouverez en fin de page un lien vers un article dédié au centrage vertical.
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 éléments 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).
Centrage des éléments absolute
Pour les éléments positionnés en "position: absolute" et autres éléments positionnés hors du flux, la technique des marges latérales automatiques ne fonctionne pas.
Historiquement, il était possible de s'en sortir à l'aide de décalages de la moitié de la taille de l'élément, mais encore fallait-il connaître la taille de notre élément !
De nos jours (depuis IE9), il existe une bien meilleure solution grâce aux transformations et notamment aux translations :
.truc-a-centrer {
position: absolute; /* postulat de départ */
top: 50%; left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}Et voilà pour le centrage horizontal et vertical de notre élément absolute !
Le centrage vertical
Pour le centrage vertical, c'est une autre histoire !
En version courte, disons que CSS n'a historiquement jamais été à l'aise pour aligner dans le sens vertical. Il fallait moultes bidouilles pour obtenir les effets souhaités.
Actuellement, plusieurs solutions simples et propres nous permettent de parvenir à cet exploit : les translations, Flexbox et Grid Layout pour ne citer que les principales.
Vous trouverez toutes les techniques d'Alsacréations dans un article dédié au centrage vertical.