Une brève analyse de plusieurs méthodes de définition d'images centrées en CSS

Dans la conception Web, les images sont un élément très important et sont souvent utilisées comme une partie importante de la mise en page. Alors, lors du réglage de la position d'affichage de l'image, comment obtenir l'affichage centré de l'image via CSS ? Cet article vous présentera la méthode de définition d'une image centrée en CSS.

1. Définir l'image d'arrière-plan dans div

Avec background-image, nous pouvons obtenir le paramètre d'arrière-plan de l'image le plus simple. Tout d'abord, en HTML, nous définissons un élément div et lui attribuons un identifiant unique :

<div id="img_div"></div>

Ensuite, en CSS, nous utilisons le code suivant pour définir l'image d'arrière-plan et définir l'attribut background-position sur center, et c'est tout. Affichage centré :

#img_div {
  background-image: url("image.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Parmi eux, l'attribut background-size est défini sur cover pour garantir que l'image peut être mise à l'échelle proportionnellement à la même largeur et hauteur que le conteneur lorsqu'elle est affichée.

2. Utilisez la position et la marge pour centrer l'image

Pour l'élément d'image lui-même, nous pouvons obtenir un affichage centré en définissant son attribut de position et son attribut de marge. Tout d'abord, en HTML, nous définissons un élément img et définissons un identifiant unique :

<img id="img_elem" src="image.jpg" />

Ensuite, en CSS, nous pouvons définir sa position sur absolue, puis ajuster sa valeur de marge pour obtenir un affichage centré :

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

Parmi eux, définissez les attributs left et top à 50 % pour positionner l'élément au centre du conteneur parent, et la fonction translation() de l'attribut transform peut déplacer l'élément à la moitié de sa propre largeur et hauteur pour obtenir un affichage centré.

3. Utilisez la disposition flexible pour centrer l'image

La disposition flexible est l'une des fonctionnalités importantes de CSS3, qui peut facilement implémenter la disposition des éléments. Parmi eux, vous pouvez obtenir un alignement central horizontal et vertical des éléments enfants dans le conteneur en définissant les propriétés justifier-content et align-items du conteneur flexible. Voyons ensuite comment centrer l’image.

Tout d'abord, en HTML, nous définissons un élément div et définissons un identifiant unique :

<div id="img_div">
  <img src="image.jpg" />
</div>

Ensuite, en CSS, nous définissons l'élément div comme un conteneur flexible et définissons les attributs justifier-contenu et align-items au centre, l'image peut être affichée au centre :

#img_div {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

De cette façon, après avoir défini ces attributs de l'élément div où se trouve l'image, son sous-élément img peut automatiquement être affiché au centre.

Résumé

Ci-dessus, il existe plusieurs façons de définir des images centrées en CSS. Parmi elles, les méthodes d'utilisation de background-image et position + margin sont relativement simples, tandis que l'utilisation de flex layout peut gérer plus facilement la disposition des éléments enfants. Différentes méthodes conviennent à différents scénarios. Les développeurs peuvent choisir la méthode qui leur convient en fonction de la situation réelle et l'utiliser de manière flexible.

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!