Comment centrer du contenu en CSS

Cauchemar des débutants et prise de tête des expérimentés, centrer du contenu avec CSS, que ce soit verticalement ou horizontalement, a toujours été une source de prise de tête pour bon nombre de personnes.

Transformations, alignements, marges, espacements, sont autant de critères qui peuvent influencer le bon centrage d’un élément. Dans cet article on va voir ensemble des types de centrage pour que tu puisses enfin centrer sans devoir t’énerver sur ton pauvre clavier.

Centrer horizontalement en CSS

C’est à mon avis l’action que l’on veut réaliser le plus souvent. Chaque élément peut ou doit être centré en utilisant différentes méthodes. En effet on ne centre pas le texte de la même façon que le container d’un site.

text-align

Le plus fréquent et le plus facile des types de centrage pour centrer des lignes de texte que ce soit dans un paragraphe ou dans un titre.

p {
  text-align: center;
}

Simple efficace, text-align définit l’alignement horizontal d’un élément de bloc. Par conséquent tu peux l’utiliser pour centrer des éléments inline. (inline, inline-block, inline-table, inline-flex, etc.)

<main style="text-align: center;">
  <article style="display: inline-block;">Centré</article>
</main>

Tu pourras retrouver des exemples avec les intégrations Codepen sur les articles, alors n’hésites pas à y jeter un coup d’œil.

margin

Les marges peuvent être utilisées pour centrer des éléments de niveau bloc.

.center {
  margin: 0 auto;
}

Si tu viens de tester le bout de CSS que je viens de te donner et que ton élément n’est pas centré ne m’insulte pas tout de suite. Déjà tu pourras surement le faire par la suite, mais surtout il faut que ton élément de bloc ait une largeur définie pour que celui-ci soit centré. Centrer un bloc de 100% de largeur, dans un bloc de 100% de largeur, c’est pas super visible.

position & transform

Une méthode un peu brute mais qui va permettre de centrer ce que tu souhaites.

.parent {
  position: relative;
}
.children {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<main class="parent">
  <article class="children">Centré</article>
</main>

Tu peux utiliser le positionnement absolu ou relatif sur l’enfant mais il faudra dans le cas du positionnement relatif, que l’enfant est une taille définie ou soit un élément inline.

Dans tous les cas cette méthode de centrage doit être utilisés à défaut des autres ou lorsque vous travaillez avec des éléments en position absolue (par exemple un design avec ::after ou ::before).

Le sacro-saint : flex

Prions pour toutes ces personnes plus intelligentes que moi, qui ont travaillé sur ce standard. Qui nous ont fourni un moyen plus efficace de disposer, d’aligner et de répartir l’espace entre les éléments même sans connaitre leur taille.

Et normalement avec cette propriété tu n’as plus besoin d’utiliser Bootstrap pour centrer du contenu ou pour créer un layout responsive.

Avec flex tu vas pouvoir centrer n’importe quel contenu à l’intérieur de son parent. Sans devoir cette fois-ci te soucier de sa taille ou du nombre d’éléments que tu veux centrer.

.parent {
  display: flex;
  justify-content: center;
}

Et comme par magie tous les éléments de premier niveau présents dans le parent seront centrés grâce à la propriété justify-content.

Centrer verticalement en CSS

Je sais ce que tu es en train de dire : « Il y a d’autres façons de centrer du contenu ». Oui c’est vrai il y en a d’autres et il y a même des façons un peu bizarre. T’inquiètes pas on verra ça dans un autre article.

Centrer verticalement est un peu plus délicat en CSS. Mais nous allons voir quelques méthodes pour réaliser ceci.

padding

C’est très simple. Il suffit d’utiliser des padding top et bottom égaux sur un bloc afin de centrer le contenu au centre.

.center {
  padding-top: 20px;
  padding-bottom: 20px;
}

line-height

Un petit « trick » pour centrer verticalement du texte sans utiliser de padding. Il suffit de donner la même hauteur de ligne que la hauteur du container.

.center {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

vertical-align

À l’époque on utilisait beaucoup les tableaux et la propriété display: table pour créer le layout du site. Cette époque est révolue (heureusement) mais on peut encore détourner cette propriété pour centrer verticalement du contenu avec l’aide de la propriété vertical-align.

.parent {
  display: table;
  height: 250px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

Il faudra renseigner une hauteur fixe au parent pour pouvoir par la suite utiliser vertical-align sur l’enfant.

position & transform

Même chose que pour centrer verticalement sauf que cette fois-ci tu as juste à inverser l’axe de la transformation.

.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

What about flex ?

J’aurais pu résumer l’article à UTILISEZ FLEXBOX mais bon il est important de vous montrer plein d’autres techniques.

.container {
  display: flex;
  justify-content: center;
}

Les items seront maintenant centrés verticalement. C’est aussi simple que cela.

Horizontalement et verticalement en CSS

Tu as dû te rendre compte que certaines propriétés pouvaient être utilisées ensemble pour centrer en CSS sur tous les axes. Je vais te présenter un les deux techniques que j’utilise le plus.

Tu peux utiliser position: absolute et transform pour centrer verticalement et horizontalement n’importe quel contenu.

.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Sinon je veux pas avoir l’air de forcer mais tu peux utiliser flexbox.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Liens utiles

Documentation : https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Flexbox

Un petit helper avec un joli nom de domaine que je ne pourrais pas acheter du coup : http://howtocenterincss.com/

Conclusion

Il y a d’autres méthodes pour centrer du contenu en CSS, je posterais un article sur ces méthodes moins conventionnelles par la suite.

Cet article est le premier d’une série consacré à des problèmes CSS simples mais qui peuvent te donner envie de casser ton clavier. Si tu as aimé l’article tu peux me le dire en commentaire.

A bientôt pour un nouvel article !