```markdown

HTML 图片水平居中垂直居中显示

在网页设计中，图片的居中显示是一个常见的需求，尤其是在响应式设计中，如何使图片在不同屏幕上都能居中显示变得尤为重要。下面我们将介绍如何使用 HTML 和 CSS 使图片同时实现水平和垂直居中。

方法 1：使用 Flexbox

Flexbox 是 CSS3 中一种强大的布局方式，它能够轻松地实现元素的居中对齐。我们可以通过设置父元素为 display: flex，然后使用 justify-content 和 align-items 来实现图片的水平和垂直居中。

示例代码：

```html

```

解释：

• display: flex：将父容器设置为 flexbox 布局。
• justify-content: center：让子元素（水平方向）居中。
• align-items: center：让子元素（垂直方向）居中。
• max-width: 100%：确保图片在父容器内自适应宽度。

方法 2：使用 Grid 布局

CSS Grid 布局同样能够实现图片的居中，尤其在处理复杂布局时，它更为灵活。

示例代码：

```html

```

解释：

• display: grid：将父容器设置为 grid 布局。
• place-items: center：这是一个简写属性，用于同时设置 justify-items 和 align-items，使子元素在水平和垂直方向上都居中。

方法 3：使用绝对定位

通过绝对定位，我们也可以实现图片的居中显示。这种方法通常在传统布局中使用较多。

示例代码：

```html

```

解释：

• position: absolute：将图片定位于父容器内的绝对位置。
• top: 50% 和 left: 50%：将图片的左上角定位到容器的中心。
• transform: translate(-50%, -50%)：将图片自身的中心点对准父容器的中心点。

总结

以上是三种常见的 HTML 和 CSS 方法来实现图片的水平和垂直居中。Flexbox 和 Grid 是现代 CSS 布局的推荐方式，它们更加简洁且支持响应式设计。绝对定位适合在传统布局中使用，但在响应式设计中需要更多的调整。根据项目的需求和浏览器兼容性选择合适的方法。

希望这些方法对你有所帮助，祝你在开发过程中顺利实现图片居中效果！ ```