【居中】相对定位 + 绝对定位 或 Flexbox 居中

方法一：相对定位 + 绝对定位

关键代码：

父：position: relative"
子：  position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

 <button style="background: none;border: none;position: relative">     
      <img src="https://youke1.picui.cn/s1/2025/10/24/68fb0cabaa3af.png" width="233px" height="51px"/>
     <span style="
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    pointer-events: none; /* 不阻止按钮点击 */
  ">Repay now</span>
    </button>

方法二：Flexbox 居中

说明：

按钮用 Flexbox 容器居中内容

图片绝对定位覆盖按钮背景

文字自动居中

<button>
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 233px;
  height: 51px;
">
  <img src="https://youke1.picui.cn/s1/2025/10/24/68fb0cabaa3af.png" style="position: absolute; width: 100%; height: 100%; " />
  <span style="color: white; font-weight: bold; z-index: 1">Cancel</span>
</button>

3、总结

方法	特点
相对 + 绝对定位	精准控制文字位置，适合单行文字
Flexbox	容易适配多行文字，响应式方便