css中img居中怎么设置

在 CSS 中，可通过以下方法让图像居中：使用文本对齐属性：将图像设置为块元素，并设置自动左右外边距。使用 flexbox 布局：将图像放入 flexbox 容器，并设置水平和垂直居中属性。使用网格布局：将图像放入网格容器，并设置同时水平和垂直居中属性。使用绝对定位：将图像从正常流中移除，设置水平居中位置和通过变换使其垂直居中。

CSS 中如何让图像居中

在 CSS 中，让图像居中可以使用多种方法：

使用文本对齐属性

<code class="css">img {
  display: block;
  margin: 0 auto;
}</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%) 将图像向左和向上移动其自身宽高的 50%，从而在父元素中居中。

以上是css中img居中怎么设置的详细内容。更多信息请关注PHP中文网其他相关文章！