Article original : How to Center Anything in CSS Using Flexbox and Grid ✨

Aujourd'hui, je vais vous montrer comment centrer et aligner votre contenu avec CSS. En cours de route, nous examinerons diverses techniques d'alignement. Alors, commençons ! 💡

Table des matières ->

Image Méthodes

Vous pouvez également regarder ce tutoriel sur YouTube si vous le souhaitez :

Mais.... Attendez une minute !

Image

Tout d'abord, comprenons :

  • Axe principal
  • Axe transversal

Qu'est-ce que l'axe principal en CSS ?

Vous pouvez également l'appeler :

  • Axe-X
  • Axe principal
  • Ligne horizontale

La ligne de gauche à droite est l'axe principal.

Image Axe principal

Qu'est-ce que l'axe transversal en CSS ?

Vous pouvez également l'appeler :

  • Axe-Y
  • Axe transversal
  • Ligne verticale

La ligne de haut en bas est l'axe transversal.

Image Axe transversal

Installation du projet

Image

Pour expérimenter avec toutes les propriétés et valeurs, écrivez le code suivant dans votre éditeur de code.

HTML

Écrivez ce code à l'intérieur de la balise body :

<div class="container">

   <div class="box-1"> </div>

</div>

CSS

Effacez les styles par défaut du navigateur afin que nous puissions travailler plus précisément :

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Sélectionnez la classe .container et définissez-la à 100vh. Sinon, nous ne pouvons pas voir notre résultat sur l'axe vertical :

.container{
   height: 100vh;
}

Stylisez la classe .box-1 comme ceci :

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Nous sommes prêts, maintenant commençons à coder !

Image

Comment utiliser Flexbox pour centrer n'importe quoi

Image

Nous pouvons utiliser Flexbox pour aligner notre contenu div à la fois le long de l'axe X et Y. Pour cela, nous devons écrire la propriété display: flex; à l'intérieur de la classe .container :

.container{
   display: flex;

   height: 100vh;
}

Nous allons expérimenter avec ces 2 propriétés :

  • justify-content
  • align-items

Comment centrer n'importe quoi horizontalement en utilisant Flexbox

Nous pouvons utiliser la propriété justify-content pour cela en utilisant ces valeurs 👋

Image valeurs de la propriété justify-content de flexbox

Pour expérimenter avec les valeurs, écrivez le code suivant 👋

.container{
   display: flex;
   height: 100vh;

 /* Changez les valeurs pour expérimenter 👋*/
   justify-content: center;
}

Le résultat ressemblera à ceci 👋

Image résultat de justify-content flexbox

Comment centrer n'importe quoi verticalement en utilisant Flexbox

Nous pouvons utiliser la propriété align-items pour cela en utilisant ces valeurs 👋

Image valeurs de la propriété align-items de Flexbox

Pour expérimenter avec les valeurs, écrivez le code suivant 👋

.container{
   height: 100vh;
   display: flex;

 /* Changez les valeurs 👋 pour expérimenter*/
   align-items: center;
}

Le résultat ressemble à ceci 👋

Image Résultat de align-items flexbox

Comment centrer une div horizontalement et verticalement en utilisant Flexbox

Ici, nous pouvons combiner les propriétés justify-content et align-items pour aligner une div à la fois horizontalement et verticalement.

Écrivez les codes suivants 👋

.container{
   height: 100vh;
   display: flex;

/* Changez les valeurs 👋 pour expérimenter*/
   align-items: center;
   justify-content: center;
}

Le résultat ressemble à ceci 👋

Image Centrer une div horizontalement et verticalement

Vous pouvez consulter cette feuille de triche pour en savoir plus sur les différentes propriétés de Flexbox.

Comment utiliser CSS Grid pour centrer n'importe quoi

Image

Nous pouvons utiliser grid pour aligner notre contenu div à la fois le long de l'axe X et Y. Pour cela, nous devons écrire la propriété display: grid; à l'intérieur de la classe .container :

.container{
   display: grid;

   height: 100vh;
}

Nous allons expérimenter avec ces 2 propriétés :

  • justify-content
  • align-content

Alternativement, vous pouvez utiliser ces 2 propriétés :

  • justify-items
  • align-items

Comment centrer n'importe quoi horizontalement en utilisant CSS Grid

Nous pouvons utiliser la propriété justify-content pour cela en utilisant ces valeurs 👋

Image valeurs de la propriété justify-content de Grid

Écrivez le code suivant 👋

.container{
   height: 100vh;
   display: grid;

  /* Changez les valeurs 👋 pour expérimenter*/
   justify-content: center;
}

Le résultat ressemble à ceci 👋

Image résultat de justify-content grid

Comment centrer n'importe quoi verticalement en utilisant CSS Grid

Nous pouvons utiliser la propriété align-content pour cela en utilisant ces valeurs 👋

Image Valeurs de la propriété align-content de CSS grid

Écrivez le code suivant 👋

.container{
   height: 100vh;
   display: grid;

  /* Changez les valeurs 👋 pour expérimenter*/
   align-content: center;
}

Le résultat ressemblera à ceci 👋

Image résultat de align-content grid

Comment centrer une div horizontalement et verticalement en utilisant CSS Grid

Ici, nous pouvons combiner les propriétés justify-content et align-content pour aligner une div à la fois horizontalement et verticalement.

Écrivez le code suivant 👋

.container{
   height: 100vh;
   display: grid;

/* Changez les valeurs 👋 pour expérimenter*/
   align-content: center;
   justify-content: center;
}

Le résultat ressemble à ceci 👋

Image Centrer une div horizontalement et verticalement avec Grid

Méthode alternative

Vous pouvez également utiliser les propriétés justify-items et align-items pour dupliquer les mêmes résultats :

.container{
   height: 100vh;
   display: grid;

/* Changez les valeurs 👋 pour expérimenter*/
   align-items: center;
   justify-items: center;
}

La propriété place-content dans CSS Grid

Ceci est le raccourci de 2 propriétés de CSS Grid->

  • justify-content
  • align-content

Suivez 👋

.container{
   height: 100vh;
   display: grid;

   place-content: center;
}

Nous obtenons le même résultat 👋

Image Centrer une div horizontalement et verticalement

Consultez cette feuille de triche pour découvrir la différence entre les diverses propriétés de Grid.

Faites une pause !

Jusqu'à présent, tout va bien – faites une pause.

Image

Comment utiliser la propriété CSS Position pour centrer n'importe quoi

Image

Ceci est une combinaison de ces propriétés ->

  • position
  • top, left
  • transform, translate

Écrivez le code suivant 👋

.container{
   height: 100vh;
   position: relative;
}

Avec ceci :

.box-1{
   position: absolute;

   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

D'abord... Comprendre le point central d'une div

Par défaut, ceci est le point central d'une div 👋

Image Point central par défaut d'une div

C'est pourquoi nous voyons ce comportement étrange 👋

Image La boîte n'est pas au centre exact

Remarquez que la boîte n'est pas au centre exact dans l'image ci-dessus. 👀

En écrivant cette ligne 👋

transform: translate(-50%,-50%);

Nous résolvons le problème 👋

Image Nouveau point central de notre div

Et nous obtenons ce résultat 👋

Image La boîte est au point central exact

Qu'est-ce que la propriété Translate en CSS ?

Translate est le raccourci de 3 propriétés ->

  • translateX
  • translateY
  • translateZ

Comment centrer une div horizontalement en utilisant la propriété CSS Position

Nous allons utiliser la propriété left à l'intérieur de la classe .box-. Suivez 👋

.box-1{
/* autres codes sont ici*/    

   left: 50%;
   transform: translate(-50%);
}

Et nous obtenons ce résultat 👋

Image résultat de la propriété left et transform

Comment centrer une div verticalement en utilisant la propriété CSS Position

Nous allons utiliser la propriété top à l'intérieur de la classe box-. Suivez 👋

.box-1{
/* Autres codes sont ici*/    

   top: 50%;
   transform: translate(0,-50%);
}

Et nous obtenons ce résultat 👋

Image résultat de la propriété top et transform

Comment centrer une div horizontalement et verticalement en utilisant la propriété CSS position

Pour obtenir ce résultat, nous allons combiner ces propriétés ensemble ->

  • top, left
  • transform, translate

Suivez 👋

.box-1{
/*Autres codes sont ici */    

   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

Et nous obtenons ce résultat 👋

Image résultat de la propriété position et transform

Comment utiliser la propriété margin pour centrer n'importe quoi

Image

La propriété margin est le raccourci de 4 propriétés

  • margin-**top**, margin-**bottom**
  • margin-**left**, margin-**right**

Écrivez ce code pour le configurer 👋

.container{
   height: 100vh;

   display: flex;
}

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Comment centrer une div horizontalement en utilisant la propriété CSS margin

Nous allons utiliser la propriété margin à l'intérieur de la classe .box-1. Écrivez le code suivant 👋

.box-1{
 //Autres codes sont ici 

  margin: 0px auto;    
}

Le résultat ressemble à ceci 👋

Image **résultat de la propriété CSS margin**

Comment centrer une div verticalement en utilisant la propriété CSS margin

Nous allons utiliser la propriété margin à l'intérieur de la classe .box-1. Écrivez le code suivant 👋

.box-1{
 //Autres codes sont ici 

  margin: auto 0px;    
}

Le résultat ressemble à ceci 👋

Image **résultat de la propriété CSS margin**

Comment centrer une div horizontalement et verticalement en utilisant la propriété CSS margin

Nous allons utiliser la propriété margin à l'intérieur de la classe .box-. Écrivez le code suivant 👋

.box-1{
 //Autres codes sont ici 

  margin: auto auto;    
}

Le résultat ressemble à ceci 👋

Image Résultat de la propriété CSS margin

Ressources supplémentaires

Crédits

Conclusion

Maintenant, vous pouvez aligner ou centrer votre contenu en utilisant l'une de ces quatre méthodes en CSS.

Voici votre médaille pour avoir lu jusqu'à la fin ❤️

Suggestions et critiques sont grandement appréciées ❤️

Alt Text

YouTube / Joy Shaheb

LinkedIn / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb