Comment définir le centre d'image en CSS

En CSS, vous pouvez centrer une image en : Utilisation des propriétés d'alignement du texte : définissez l'image comme élément de bloc et définissez des marges gauche et droite automatiques. Utiliser la disposition flexbox : placez l'image dans un conteneur flexbox et définissez les propriétés de centrage horizontal et vertical. Utilisez une disposition en grille : placez l'image dans un conteneur de grille et définissez les propriétés du centre horizontal et vertical. Utiliser le positionnement absolu : supprimez l'image du flux normal, centrez-la horizontalement et centrez-la verticalement avec une transformation.

Comment centrer une image en CSS

En CSS, il existe de nombreuses façons de centrer une image :

Utilisez l'attribut d'alignement du texte

<code class="css">img {
  display: block;
  margin: 0 auto;
}</code>

• display: block code > Faire de l'image un élément de bloc. <code>display: block 使图像成为一个块元素。
• margin: 0 auto 自动设置图像的左右外边距，使其在父元素中水平居中。

使用 flexbox 布局

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

img {
  width: 100px;
  height: 100px;
}</code>

• 创建一个 flexbox 容器（.container）。
• justify-content: center 将子元素（图像）在水平方向上居中。
• align-items: center 将子元素在垂直方向上居中。

使用网格布局

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  width: 100px;
  height: 100px;
}</code>

• 创建一个网格容器（.container）。
• place-items: center 将子元素（图像）同时在水平和垂直方向上居中。

使用绝对定位

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

• 使用绝对定位将图像从其正常流中移除。
• left: 50% 将图像水平居中，但它将相对于其父元素的左边界居中。
• transform: translate(-50%, -50%)
margin: 0 auto Définit automatiquement les marges gauche et droite de l'image afin qu'elle soit centrée horizontalement dans l'élément parent.

🎜🎜🎜Créez un conteneur flexbox (.container) en utilisant la disposition flexbox🎜🎜rrreee🎜🎜. 🎜🎜justify-content: center Centre l'élément enfant (image) horizontalement. 🎜🎜align-items: center Centre les éléments enfants verticalement. 🎜🎜🎜🎜Créez un conteneur de grille (.container) en utilisant la disposition en grille🎜🎜rrreee🎜🎜. 🎜🎜place-items: center Centre les éléments enfants (images) horizontalement et verticalement. 🎜🎜🎜🎜Utilisez le positionnement absolu🎜🎜rrreee🎜🎜Utilisez le positionnement absolu pour supprimer une image de son flux normal. 🎜🎜left: 50% Centre l'image horizontalement, mais elle sera centrée par rapport à la bordure gauche de son élément parent. 🎜🎜transform: translate(-50%, -50%) Déplace l'image vers la gauche et vers le haut de 50 % de sa propre largeur et hauteur, en la centrant dans l'élément parent. 🎜🎜

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!