Child only breaks out of inline-grid parent in Firefox

Question

I want the image centered within my button but it breaks out in Firefox while it works flawlessly in Google Chrome. Why does this occur and how can I prevent it from happening?

Here is the code:

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>

Here is what it looks in Chrome:

And in Firefox:

Answer 1

display: inline-grid is not needed. Button is a block element and everything set in the body will be in the middle of the button

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>