Centrer les éléments en CSS en utilisant Flexbox

Le centrage des éléments sur une page, en particulier le centrage vertical, a été difficile à faire dans le passé avec CSS et nous avons dû utilisé un certain nombre de hacks. Heureusement, Flexbox rend le tout plus facile.

Centrage horizontal

Commençons par un div qui contient deux paragraphes que nous voulons centrer horizontalement sur le même axe. C’est chose facile avec la propriété justify-content avec la valeur center sur le conteneur:

HTML

<div class="container flex">
  <p>
    <img src="http://lorempicsum.com/simpsons/250/125/1">
  </p>
  <p>
    <img src="http://lorempicsum.com/simpsons/250/125/2">
  </p>
</div>

CSS

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

.container {
    padding: .75em;
    height: 300px;
    box-shadow: 0px 0px 5px #333;
    border-radius: 4px;
    background: light-gray;
}

.container p {
    text-align: center;
    background: black;
    margin: 1em;
    padding: 1em;
}

Centrage vertical

La puissance de Flexbox est également dans sa capacité à centrer des éléments verticalement, voici notre exemple, mais avec les éléments flex également centrés verticalement :

CSS

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

Si vous souhaitez simplement centrer verticalement des éléments Flex spécifiques, vous pouvez définir align-self sur les éléments à la place :

CSS

.flex p:last-child {
    align-self: center;
}

Centrage vertical sur toute la page

Si vous voulez placer un élément au centre d’une page, cela peut être un peu plus compliqué car les objets flexibles ne se centrent que verticalement en fonction de la hauteur de leur conteneur. Cela signifie que le conteneur lui-même doit avoir la même hauteur que la page elle-même. C’est assez facile à faire en utilisant les unités viewport, où 100vh est 100% de la hauteur de la fenêtre.

Voici un exemple simple:

See the Pen Centrer Horizontalement et Verticalement avec Flexbox by Damien Flandrin (@dam62500) on CodePen.

···