Comment centrer une div (3 moyens)

Comment centrer une div en CSS 🏋️ Je vois encore et toujours passer ce meme 🤯 Rejoins l'élite en connaissant tous les moyens de centrer une div 📢

Voici les 3 solutions :

• Grid 🔱
• Flexbox 🏋️
• Hack (expliqué) 💥

Grid 🔱

Je le présente en premier car il tient littéralement en deux lignes de code ! Plus aucune excuse !

Le place-content est un shorthand pour définir align-content et justify-content simultanément.

import "./styles.css";

const App = () => {
return (
  <div 
    className="container" 
    style={{ 
      display: "grid", 
      placeContent: "center",
    }}
  >
    <div className="item"></div>
  </div>
);
}

export default App;

Donc avec align-content on définit l'alignement vertical et justify-content l'alignement horizontal.

Flexbox 🏋️

Un peu comme grid, mais sans le shorthand, donc il faut 3 lignes !

Avec align-items on définit l'alignement vertical et justify-content l'alignement horizontal.

import "./styles.css";

const App = () => {
return (
  <div 
    className="container" 
    style={{ 
      display: "flex", 
      alignItems: "center", 
      justifyContent: "center" 
    }}
  >
    <div className="item"></div>
  </div>
);
}

export default App;

Hack 💥

Ici, on utilise plusieurs principes ! On doit définir le parent comme relatif et l'enfant comme absolute !

.container {
  position: relative;
}

.item {
  position: absolute;
}

L'enfant va être déplacé en top 50% et left 50% ce qui signifie qu'il se déplace après le milieu de chaque axe.

.item {
  position: absolute;
  top: 50%;
  left: 50%;
}

Une fois déplacé ici, on va utiliser transform pour bouger notre carré rouge à droite et en haut de 50%

Il faut savoir que pour transalte : 100% = la taille du carré rouge 🟥

Donc le déplacer avec ses deux axes signifie : déplacer de la moitié de sa taille en haut et en bas !

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Voici le code final avec l'exemple :

import "./styles.css";

const App = () => {
return (
  <div 
    className="container" 
    style={{ 
      position: "relative"
    }}
  >
    <div 
      className="item" 
      style={{ 
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
      }}
    ></div>
  </div>
);
}

export default App;

Conclusion

Tu es maintenant un expert pour centrer une div.

PS : Ceci est un premier article, test de base. Il est basé sur un thread Twitter. Les prochains seront plus poussés 😉