按钮在div居中显示图片

按钮在div居中显示图片的方法有多种，下面我将介绍其中两种常用的方法。

第一种方法是使用Flexbox布局。Flexbox是一种用于页面布局的弹性盒子模型，可以方便地实现元素的居中对齐。通过设置父元素的display属性为flex，再使用justify-content和align-items属性来控制子元素的水平和垂直居中。

示例代码如下：

<div class="e6a7-7253-e763-08c6 container">
  <button>
    <img src="image.jpg" alt="图片">
  </button>
</div>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在上面的代码中，我们将按钮放置在一个名为container的div中。通过设置container的display属性为flex，按钮会自动水平和垂直居中显示。按钮内部使用img标签来显示图片。

第二种方法是使用绝对定位和transform属性。通过将按钮设置为绝对定位，并使用transform属性将按钮向左上角移动一半的宽度和高度，可以实现按钮的居中对齐。

示例代码如下：

<div class="701f-8f6d-15d2-6668 container">
  <button>
    <img src="image.jpg" alt="图片">
  </button>
</div>
<style>
.container {
  position: relative;
}
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

在上面的代码中，我们同样将按钮放置在一个名为container的div中。通过设置container的position属性为relative，可以使得按钮相对于container进行定位。按钮本身的position属性设置为absolute，top和left属性设置为50%，即将按钮的左上角定位在container的中心位置。使用transform属性将按钮向左上角移动一半的宽度和高度，实现按钮的居中显示。

以上是两种常用的方法，它们都可以实现按钮在div中居中显示图片的效果。选择哪种方法取决于具体的需求和页面布局。还可以根据需要对按钮和图片进行样式调整，如设置按钮的宽度和高度、调整图片的大小等，以满足设计要求。