Comment centrer une div en CSS (Flexbox)
Créez visuellement une mise en page CSS flexbox : flex-direction, justify-content, align-items, flex-wrap et gap sur le conteneur, plus flex-grow, flex-shrink et flex-basis par enfant, le tout avec un aperçu en direct et un CSS copiable.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Voici la réponse directe à la question la plus posée en CSS : pour centrer une div, appliquez display: flex, justify-content: center et align-items: center à son parent. C'est tout — trois déclarations sur le conteneur, et l'enfant se retrouve 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 vous la montre en action sur trois boîtes numérotées dès maintenant.
Avant flexbox, centrer une div nécessitait des astuces : margin: 0 auto ne centrait qu'horizontalement et uniquement sur un bloc de largeur fixe ; le centrage vertical impliquait position: absolute avec des marges négatives ou une astuce de transformation, toutes deux fragiles dès que le contenu changeait de taille. justify-content gère l'axe principal et align-items gère l'axe secondaire — ensemble, ils centrent dans les deux directions quelle que soit la hauteur ou la largeur de l'enfant, ce qui explique précisément pourquoi cette paire est devenue la réponse standard.
Faites glisser n'importe quelle commande ci-dessous et regardez les trois boîtes d'aperçu rester centrées tandis que le conteneur change de forme, ou ajoutez un écart entre elles. Quand le résultat vous convient, 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, sans bibliothèque nécessaire.