Centrer un divComment centrer un div avec CSS ?
Pour centrer un div à l'aide de CSS, vous pouvez utiliser les propriétés d'alignement de boîte CSS sur le conteneur parent. Toutefois, ces propriétés d'alignement ne sont pas prises en charge par les navigateurs pour la mise en page en bloc et en ligne. Par conséquent, vous devez faire en sorte que le conteneur parent soit un conteneur flex ou grid pour permettre l'utilisation de l'alignement.
Voici un exemple de centrage vertical d'un div à l'aide de flexbox :
Dans l'exemple ci-dessus, la propriété display du conteneur .parent est définie sur flex, ce qui le transforme en conteneur flex. La propriété align-items est définie sur center, ce qui aligne verticalement les éléments enfants. La propriété justify-content est également définie sur center, ce qui aligne horizontalement les éléments enfants.
Notez que cette technique peut être utilisée pour centrer n'importe quel type d'élément à l'intérieur d'un autre. Vous pouvez essayer de modifier les valeurs des propriétés d'alignement pour obtenir différents alignements.
Si vous préférez utiliser la mise en page en grille (grid ), vous pouvez également centrer un div en utilisant les propriétés align-self et justify-self à l'intérieur d'une zone de grille. Voici un exemple :
Dans cet exemple, le div enveloppant .parent est un conteneur de grille. Le div .item1 est placé dans la seule cellule de la grille et est centré verticalement et horizontalement à l'aide des propriétés align-self et justify-self.