Comment centrer une image dans un div avec CSS

Les méthodes pour centrer les images dans les divs en CSS sont : Alignement du texte : convient au centrage vertical des images et du texte. Flexbox : Convient au centrage horizontal et vertical des images. Conversion : fonctionne pour les images de taille fixe. Marges automatiques : adaptées aux situations où la largeur de l’image est connue.

Comment centrer l'image dans un div en CSS

Méthode 1 : text-align

div {
  text-align: center;
}

img {
  display: inline-block;
}

Cette méthode convient aux situations où vous souhaitez que l'image soit centrée verticalement avec le texte .

Méthode 2 : flexbox

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}

flexbox permet une mise en page flexible. Cette méthode convient aux situations où les images doivent être centrées horizontalement et verticalement.

Méthode 3 : transformation

div {
  position: relative;
}

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

Cette méthode utilise le positionnement et la transformation absolus et convient aux images de taille fixe.

Méthode 4 : margin auto

div {
  text-align: center;
}

img {
  margin: auto;
}

margin : auto centre automatiquement l'image, mais ne peut être utilisée que lorsque la largeur de l'image est connue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!