Comment faire apparaître les images centrées de haut en bas en CSS

Méthodes pour utiliser CSS pour centrer l'image de haut en bas : utilisez flexbox, définissez la direction flexible du conteneur parent sur colonne, justifiez le contenu et alignez les éléments au centre. Utilisez le positionnement absolu, définissez la position de l'image sur absolue, en haut et à gauche à 50 % et utilisez l'attribut de transformation pour le décalage. Pour utiliser une disposition en grille, définissez l'affichage du conteneur parent sur grille et placez les éléments au centre. Utilisez l'attribut object-fit pour centrer l'image

Comment utiliser CSS pour centrer l'image de haut en bas

En CSS, vous pouvez utiliser la méthode suivante pour centrer l'image de haut en bas :

Méthode 1 : Utiliser flexbox

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}

Méthode 2 : Utiliser le positionnement absolu

.container {
  position: relative;
}

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

Méthode 3 : Utiliser la disposition en grille

.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}

Méthode 4 : Utiliser l'attribut d'ajustement d'objet

img {
  object-fit: contain;
}

Cinquième méthode : utiliser padding

.container {
  padding: 20px 0;
}

img {
  height: 100px;
}

Suggestions pour choisir une méthode :

• Si vous avez besoin d'autres éléments autour de l'image, utilisez une mise en page flexbox ou en grille.
• Si la taille de l'image est fixe, utilisez le positionnement absolu ou l'attribut d'ajustement d'objet.
• Si la taille de l'image n'est pas fixe, il est recommandé d'utiliser une disposition flexbox ou grille.

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!