子只在 Firefox 中脱离内联网格父级 [重复]

Question

我希望图像在我的按钮中居中，但它在 Firefox 中突然出现，而在 Google Chrome 中完美运行。为什么会发生这种情况？如何防止这种情况发生？

代码如下：

button {
    all: unset;
    height: 50px;
    width: 50px;
    display: inline-grid;
    place-items: center;
    background-color: firebrick;
}

button img {
    height: 60%;
    margin: auto;
}

<button><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg"></button>

这是它在 Chrome 中的外观：

在 Firefox 中：

Answer 1

显示：不需要内联网格。按钮是一个块元素，body中设置的所有东西都会在按钮的中间

button {
  height: 50px;
  width: 50px;
  background-color: firebrick;
}

button img {
  height: 60%;
  margin: auto;
  display: block;
}

<button><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg"></button>