Centrer horizontalement avec Flexbox

Nous avons vu précédemment comment centrer verticalement avec Flexbox. On complète donc avec un article sur le centrage horizontal. Les techniques proposées ici fonctionnent sur tous les navigateurs modernes et sur Internet Explorer 11.

1. [#] Comment centrer horizontalement des éléments ?
2. [#] Solution alternative
3. [#] Empêcher les éléments flex d’occuper toute la hauteur du parent

Comment centrer horizontalement des éléments ?

Pour aligner horizontalement un texte, un bloc, une image ou une liste d’éléments :

Lorem ipsum

Lorem ipsum

<div class="container">
   Lorem ipsum
</div>

<div class="container">
   <div class="block">
      Lorem ipsum
   </div>
</div>

<div class="container">
   <img src="image.png">
</div>

Lorem ipsum

Lorem ipsum

<div class="container">
   <div class="block">Lorem ipsum</div>
   <div class="block">Lorem ipsum</div>
</div>

<div class="container">
   <img src="image-1.png">
   <img src="image-2.png">
</div>

Il suffit de définir un contexte flex et de préciser l’alignement des enfants flex avec justify-content :

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

L’alignement est basé par rapport à l’axe principal, ici horizontal parce que nous évoluons dans le contexte par défaut où flex-direction vaut row (« ligne », à l’inverse de column).

Solution alternative

Le centrage horizontal peut également s’obtenir grâce à la propriété margin, appliquée directement sur l’élément à centrer :

.container {
   display: flex;
}

.block {
   margin-left: auto;
   margin-right: auto;
}

Dans un contexte flex, l’utilisation de margin en auto permet de pousser l’élément dans une direction donnée. Quand les deux sens d’un même axe sont définis (comme ici avec margin-left et margin-right), l’espace libre est réparti automatiquement autour de l’élément.

Cette solution est peut-être un peu moins souple que la précédente puisqu’elle empêche de définir une marge autre que auto. Elle est également moins directe car pour une liste il faudra cibler le premier (margin-left:auto) et le dernier (margin-right:auto) élément de la liste pour réaliser le centrage.

Empêcher les éléments flex d’occuper toute la hauteur du parent

Par défaut, un enfant flex occupera toujours toute la hauteur de son parent :

<div class="container" style="height:80px">
   <div class="block">Lorem ipsum</div>
</div>

<div class="container" style="min-height:80px">
   <div class="block">Lorem ipsum</div>
   <div class="block">Lorem ipsum</div>
</div>

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

Pour éviter ce comportement, il faudra préciser l’alignement des éléments avec align-items (similaire à justify-content mais sur l’axe perpendiculaire à l’axe principal) :

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

À noter que l’on aurait également pu cibler le ou les enfant(s) et leur appliquer un align-self.