在响应式背景 div 中居中图像超链接

Question

我一直在尝试编写电子邮件。它包含一个带有背景图像的响应式 div 和一个位于该背景中心的图像按钮。我希望图像按钮正好位于中心。但是，在具有不同视口宽度的不同设备上进行测试时，按钮会从中心移开。

https://jsfiddle.net/kevinsalgatar/7x3trcu6/

div.container {
  background: url(https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/6f1f0255-24a6-49a6-8a22-fc337c1d3430.png)no-repeat;
  max-width: 100%;
  height: auto;
  position: relative;
}

div.button {
  position: max-width: 100%;
  height: auto;
}

div.button>img {
  display: block;
  max-width: 100%;
  height: auto;
}

div.button>a {
  -webkit-transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

<div class="container">
  <div class="button">
    <a href="https://www.youtube.com/watch?v=XejJw3Xgsr4">
      <img src="https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/780372ac-7648-4dd4-9a29-9bfc7ca6c54c.png" alt="780372ac-7648-4dd4-9a29-9bfc7ca6c54c.png"></a>
  </div>
  <img src="https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/6f1f0255-24a6-49a6-8a22-fc337c1d3430.png" style="visibility: hidden;" />
</div>

Answer 1

div.container {
    background: url(https://gallery.mailchimp.com/38a79fccde10813ac5aad2f4d/images/6f1f0255-24a6-49a6-8a22-fc337c1d3430.png)no-repeat;
    max-width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
}