点击表单内按钮时按钮向右偏移移位该如何解决？

问题现象 #

表单内的免登录访问按钮，点击时会出现向右偏移移位的情况。当前使用transform: translate()搭配margin实现按钮水平居中，初步怀疑偏移和transform属性相关。

复现代码 #

按钮样式 #

.inviteBtn {
  text-align: center;
  padding: 20px 40px;
  box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, .13);
  border: none;
  outline: 0;
  background-image: var(--gradient);
  color: white;
  border-radius: 15px;
  cursor: pointer;
  margin-left: 50%;
  transform: translate(-50%, 0);
  margin-right: -50px;
}

页面结构 #

<form enctype="multipart/form-data" method="POST" class="inviteForm">
  <button name="invite" class="inviteBtn">Access without login</button>
</form>

运行效果 #

问题原因 #

偏移本质是浏览器默认给按钮:active点击态内置了微小位移的交互样式，这个内置样式也是基于transform实现，和自定义的transform居中规则、多余的负margin属性叠加时，盒模型计算出现偏差，最终表现为点击时移位。
其中margin-right: -50px是无效属性，本身不参与居中逻辑，会进一步放大位置计算误差。

修复方案 #

选任意一种即可：

• 方案1（推荐，稳定性最高）：改用flex布局做居中，完全规避transform冲突
  给父级表单添加如下样式：

  .inviteForm {
    display: flex;
    justify-content: center;
  }
  

  同时删除.inviteBtn样式里的margin-left: 50%;、transform: translate(-50%, 0);、margin-right: -50px;三个属性即可，不需要给按钮本身加任何定位偏移规则。
• 方案2（最小改动）：覆盖按钮点击态的默认transform值，删除无效负margin
  保留原有按钮居中逻辑，先删除无效的margin-right: -50px;属性，再新增如下样式覆盖默认点击态：

  .inviteBtn:active {
    transform: translate(-50%, 0);
  }
  

  强制点击状态下按钮的transform值和默认状态一致，就不会出现偏移。

内容的提问来源于stack exchange，提问作者SoundStars