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 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, vous pouvez facilement centrer un élément enfant dans son conteneur flex, quelle que soit la taille de l’enfant ou de son parent.

Voici comment obtenir le centrage parfait avec Flexbox :

.container {
    display: flex; /* Turn the parent into a flex container */
    justify-content: center; /* Center the child horizontally along the main axis */
    align-items: center; /* Center the child vertically along the cross axis */
}

Pour que cette technique fonctionne efficacement, assurez-vous que le conteneur flex possède une hauteur définie. Si la hauteur du conteneur n’est pas définie explicitement, celui-ci sera seulement aussi haut que son contenu, et le centrage vertical risque de ne pas être 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; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

.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.

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 dans 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’é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.
Donnez à l’élément .parent une height de 200px afin 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>