uniapp 自定义toast image 不居中

如果在uniapp中自定义toast时，设置了image属性，但是图片显示不居中，可以通过在样式中设置background-position属性来调整图片位置。

以下是一个示例代码：

<template>
  <view class="container">
    <button @tap="showToast">显示toast</button>
  </view>
</template>

<script>
export default {
  methods: {
    showToast() {
      uni.showToast({
        title: '自定义toast',
        icon: 'none',
        duration: 2000,
        image: '/static/custom-toast.png',
        mask: true,
        success: (res) => {
          console.log('toast显示成功', res)
        },
        fail: (err) => {
          console.log('toast显示失败', err)
        },
        complete: () => {
          console.log('toast显示完成')
        }
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 自定义toast样式 */
.custom-toast {
  background-image: url('/static/custom-toast.png');
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center 10px; /* 调整图片位置 */
  padding: 60px 40px 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  color: #fff;
  text-align: center;
}
</style>

在以上代码中，我们在样式中定义了一个.custom-toast类，其中设置了background-image、background-repeat、background-size和background-position属性，通过调整background-position属性的值，可以实现图片居中显示。

在uni.showToast()方法中，我们指定了一个自定义的类名，即className属性为'custom-toast'，这样就可以应用我们自己定义的样式。

需要注意的是，如果自定义的toast样式中设置了padding属性，需要根据实际情况调整background-position属性的值，以确保图片居中显示。