CSS 中 img 如何设置居中

在网页设计中，让图片居中显示是一个常见的需求。合理运用 CSS 可以轻松实现 img 的居中效果，下面我们就来详细探讨一下具体的方法。

行内元素水平居中

当 img 作为行内元素时，要实现水平居中相对简单。我们可以将其父元素的 text-align 属性设置为 center。例如：

.parent {
  text-align: center;
}

在 HTML 结构中，只要将 img 标签放置在具有该样式的父元素内，就能实现 img 的水平居中。不过这种方法只适用于水平方向，对于垂直居中并不起作用。

块级元素水平居中

若将 img 的 display 属性设置为 block，使其成为块级元素，实现水平居中也有特定方式。我们可以为 img 设置 margin: 0 auto。代码示例如下：

img {
  display: block;
  margin: 0 auto;
}

这里 margin: 0 auto 中，0 表示上下边距为 0，auto 会自动分配左右边距，从而使图片在父元素中水平居中。

绝对定位与负边距实现垂直水平居中

对于想要同时实现垂直和水平居中的需求，有一种经典的方法。首先将父元素设置为 position: relative，然后 img 设置为 position: absolute。通过计算图片自身宽度和高度的一半，设置负边距来实现居中。具体代码如下：

.parent {
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;  /* 假设图片高度为 100px */
  margin-left: -50px; /* 假设图片宽度为 100px */
}

这种方法要求我们事先知道图片的宽度和高度。

Flexbox 布局实现居中

Flexbox 是一种强大的布局模型，能轻松实现 img 的垂直水平居中。只需要将父元素的 display 设置为 flex 或 inline-flex，然后使用 justify-content: center 和 align-items: center 这两个属性。示例代码如下：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

这种方法简洁高效，并且不需要事先知道图片的尺寸，兼容性也较好。

通过以上几种方法，我们可以根据具体的项目需求，灵活选择合适的方式来实现 CSS 中 img 的居中显示，为网页设计增添美观和实用性。