⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Comment centrer une division en CSS (Flexbox)

Créez visuellement une mise en page CSS flexbox : flex-direction, justification-content, align-items, flex-wrap et gap sur le conteneur, ainsi que flex-grow, flex-shrink et flex-basis par enfant, le tout avec un aperçu en direct et du CSS copiable.

Traitement... 0%

Résultat

Voici la réponse directe à la question la plus posée en CSS : pour centrer un div, mettez display : flex, justifier-content : center et align-items : center sur son parent. C'est tout : trois déclarations sur le conteneur, et l'enfant est parfaitement centré horizontalement et verticalement à l'intérieur, quelle que soit sa taille. Cette page ouvre le générateur avec exactement cette combinaison déjà appliquée, donc l'aperçu ci-dessous le montre en train de travailler sur trois cases numérotées en ce moment.

Avant flexbox, centrer un div nécessitait des hacks : margin : 0 auto centré uniquement horizontalement et ne fonctionnait que sur un bloc de largeur fixe ; le centrage vertical signifie la position : absolue avec des marges négatives ou une astuce de transformation, toutes deux fragiles au moment où le contenu change de taille. justifier-content gère l'axe principal et align-items gère l'axe transversal - ensemble, ils se centrent dans les deux directions, quelle que soit la taille ou la largeur de l'enfant, c'est exactement pourquoi cette paire est devenue la réponse standard.

Faites glisser n'importe quel contrôle ci-dessous et regardez les trois zones d'aperçu rester centrées lorsque le conteneur change de forme, ou ajoutez un espace entre elles. Lorsqu'il semble correct, copiez le bloc CSS en bas directement dans votre feuille de style : il fonctionne de la même manière dans tous les navigateurs modernes, aucune bibliothèque n'est nécessaire.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Contrôles du conteneur : flex-direction, justification-content, align-items, flex-wrap et une entrée d'espace en pixels, appliqués en direct à l'aperçu.
  • Trois boîtes enfants codées par couleur par défaut (ajoutez jusqu'à huit, supprimez jusqu'à deux), chacune avec ses propres champs flex-grow, flex-shrink et flex-basis.
  • Bloc CSS copiable avec une règle .flex-container plus une règle .flex-item-N par enfant qui a des propriétés flex autres que celles par défaut.

Avantages clés

✓ Chaque contrôle de conteneur et chaque contrôle flex-grow, flex-shrink et flex-basis de chaque enfant mettent à jour trois zones d'aperçu numérotées en direct, afin que vous voyiez exactement ce que font vos règles flexbox avant de toucher une feuille de style.
✓ Le générateur n'imprime que les règles enfants qui diffèrent réellement des valeurs par défaut CSS, de sorte que le code copié reste court et lisible au lieu de reformuler flex-grow: 0 sur chaque case.
✓ Les pages prédéfinies résolvent les mises en page que les gens recherchent par nom : centrer un div, une barre de navigation logo-liens gauche-droite et colonnes flexibles de largeur égale - ouvrez-en une et l'outil est déjà configuré.

Cas d'utilisation

  • • Obtenez le CSS exact pour centrer un div à la fois horizontalement et verticalement en regardant justifier le contenu et aligner les éléments fonctionner sur les zones d'aperçu en direct.
  • • Créez une disposition de barre de navigation avec logo à gauche et liens à droite avec un espace entre les éléments et align-items: center, puis copiez le CSS du conteneur directement dans votre composant d'en-tête.
  • • Comparez l'espace entre, l'espace autour et l'espace uniformément côte à côte sur les trois mêmes cases au lieu de deviner laquelle correspond à l'espacement souhaité.