当按钮是图片时，文本也具有规定的大小和间距。如何通过CSS让文字出现在图片的中间？

<button class="image-button">
  <img src="image.jpg" alt="按钮图片">
  <span class="button-text">按钮文本</span>
</button>

.image-button {
  position: relative;
}

.image-button img {
  display: block;
  width: 100px; /* 根据实际情况设置图片的宽度 */
  height: 100px; /* 根据实际情况设置图片的高度 */
}

.image-button .button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-button .button-text {
  font-size: 16px; /* 根据实际情况设置文本的大小 */
  padding: 10px; /* 根据实际情况设置文本的间距 */
}