So legen Sie das IMG-Center in CSS fest

In CSS können Sie ein Bild zentrieren, indem Sie: Textausrichtungseigenschaften verwenden: Legen Sie das Bild als Blockelement fest und legen Sie automatische linke und rechte Ränder fest. Flexbox-Layout verwenden: Platzieren Sie das Bild in einem Flexbox-Container und legen Sie die horizontalen und vertikalen Zentrierungseigenschaften fest. Verwenden Sie ein Rasterlayout: Platzieren Sie das Bild in einem Rastercontainer und legen Sie sowohl die horizontalen als auch die vertikalen Mitteneigenschaften fest. Absolute Positionierung verwenden: Entfernen Sie das Bild aus dem normalen Fluss, zentrieren Sie es horizontal und zentrieren Sie es vertikal mit einer Transformation.

So zentrieren Sie ein Bild in CSS

In CSS gibt es viele Möglichkeiten, ein Bild zu zentrieren:

Verwenden Sie das Textausrichtungsattribut

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

• display: block Code > Machen Sie das Bild zu einem Blockelement. <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 Legt automatisch den linken und rechten Rand des Bildes fest, sodass es horizontal innerhalb des übergeordneten Elements zentriert ist.

Das obige ist der detaillierte Inhalt vonSo legen Sie das IMG-Center in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!