Le centrage parfait

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 48 sur 76.

En CSS, obtenir le « centrage parfait », c’est-à-dire centrer un élément à la fois horizontalement et verticalement dans son élément parent, est un défi courant en matière de mise en page. Flexbox offre une solution élégante et simple à ce problème. En combinant les propriétés justify-content et align-items, tu peux facilement centrer un élément enfant dans son conteneur flex, quelle que soit la taille de l’enfant ou de l’élément parent.

Voici comment obtenir un centrage parfait avec Flexbox :

.container {
    display: flex; /* Transforme l’élément parent en conteneur flex */
    justify-content: center; /* Centre l’élément enfant horizontalement sur l’axe principal */
    align-items: center; /* Centre l’élément enfant verticalement sur l’axe transversal */
}

Pour que cette technique fonctionne efficacement, veille à définir une hauteur pour le conteneur flex. Si la hauteur du conteneur n’est pas définie explicitement, celui-ci n’aura que la hauteur de son contenu, et le centrage vertical ne sera peut-être pas visible.

Voici un exemple d’utilisation de 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 précise pour le conteneur */
    border: 1px solid black; /* Facultatif : ajouter une bordure pour faciliter 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 fournit un document HTML contenant une division parente (<div>) qui contient une division enfant (<div>). Votre tâche consiste à utiliser Flexbox pour centrer parfaitement la division enfant dans la division parente. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l’élément <div> ayant la classe parent.
Définissez la propriété display de l’élément .parent sur flex pour en faire un conteneur flex.
Définissez la propriété justify-content de l’élément .parent sur center pour centrer l’élément enfant horizontalement.
Définissez la propriété align-items de l’élément .parent sur center pour centrer l’élément enfant verticalement.
Attribuez une height de 200px à l’élément .parent pour que le centrage vertical soit visible.

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>