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

<code class="css">div {
  text-align: center;
}

img {
  display: inline-block;
}</code>

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

Méthode 2 : flexbox

<code class="css">div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}</code>

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

<code class="css">div {
  position: relative;
}

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

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

Méthode 4 : margin auto

<code class="css">div {
  text-align: center;
}

img {
  margin: auto;
}</code>

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!