Le centrage parfait

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 48 sur 76.

En CSS, parvenir au « centrage parfait » — centrer un élément à la fois horizontalement et verticalement au sein de son parent — est un défi de mise en page courant. Flexbox offre une solution élégante et simple à ce problème. En combinant les propriétés justify-content et align-items, vous pouvez facilement centrer un élément enfant dans son conteneur flex, quelle que soit la taille de l'enfant ou du parent.

Voici comment obtenir le centrage parfait avec Flexbox :

.container {
    display: flex; /* Transforme le parent en conteneur flex */
    justify-content: center; /* Centre l'enfant horizontalement le long de l'axe principal */
    align-items: center; /* Centre l'enfant verticalement le long de l'axe transversal */
}

Pour que cette technique fonctionne efficacement, assurez-vous que le conteneur flex a une hauteur définie. Si la hauteur du conteneur n'est pas explicitement définie, il sera seulement aussi haut que son contenu, et le centrage vertical peut ne pas être apparent.

Voici un exemple de la façon d'utiliser cette technique en HTML :

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Définir une hauteur spécifique pour le conteneur */
    border: 1px solid black; /* Optionnel : Ajouter une bordure pour la visualisation */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

Dans cet exemple, l'élément .container a une hauteur de 300px, et l'élément .child sera parfaitement centré horizontalement et verticalement à l'intérieur de celui-ci.

Défi

Facile

On vous donne un document HTML avec une division parente (<div>) qui contient une division enfant (<div>). Votre tâche consiste à utiliser Flexbox pour centrer parfaitement la division enfant à l'intérieur de la division parente. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe parent.
Définissez la propriété display de l'élément .parent sur flex pour le transformer en conteneur flex.
Définissez la propriété justify-content de l'élément .parent sur center pour centrer l'enfant horizontalement.
Définissez la propriété align-items de l'élément .parent sur center pour centrer l'enfant verticalement.
Donnez à l'élément .parent une height de 200px pour vous assurer que le centrage vertical est visible.

Aide-mémoire

Pour centrer parfaitement un élément à la fois horizontalement et verticalement à l'aide de Flexbox, combinez justify-content: center et align-items: center :

.container {
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 300px; /* Définir une hauteur pour que le centrage vertical soit visible */
}

Le conteneur flex doit avoir une hauteur définie pour que le centrage vertical soit apparent.

Essayez vous-même

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>