在HTML中，让按钮居中显示图片是一个常见的布局需求，要实现这一效果，我们可以通过多种方法来实现，下面，我将详细地介绍如何在HTML中实现按钮居中显示图片，并确保整个过程简单易懂。
我们需要创建一个HTML按钮元素，并在其中插入图片，我会逐步教大家如何让这个按钮居中显示。
### 第一步：创建HTML结构
我们需要创建一个简单的HTML结构，包含一个按钮元素和一张图片，以下是示例代码：
```html
```
### 第二步：添加CSS样式
我们需要为按钮和容器添加CSS样式，以实现居中显示的效果。
1. **容器居中**：我们可以使用Flexbox布局来实现容器的水平居中。
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 容器高度占满视口 */
```
2. **按钮样式**：为了确保按钮看起来更美观，我们可以添加以下CSS样式：
```css
.btn {
padding: 10px;
border: none;
background-color: transparent;
```
以下是完整的CSS代码：
```html
```
### 第三步：确保图片居中
在按钮内部，图片默认是基线对齐的，为了让图片在按钮中垂直居中，我们可以使用以下CSS样式：
```css
.btn img {
vertical-align: middle;
```
将这个样式添加到上面的`