使用Flexbox在两个轴上的按钮内的中心元素

Question

我正在尝试使用Flexbox将元素置于按钮元素内的两个轴上。该代码在Chrome上运行良好，但无法将该元素置于Firefox和Safari中心。当我将按钮转换为div时，元素将按预期中心，但由于可访问性原因，这对我来说不是一个可行的解决方案。

我唯一可以想到的是导致此问题的是浏览器中的错误或由我不知道的用户代理样式表设置的某些CSS属性。

预期结果：

实际结果：

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background-color: blue;
}

.square {
  width: 32px;
  height: 32px;
  background-color: red;
}

<button type="button">
  <div class="square"></div>
</button>