2

I am trying to use Flexbox to center an element on both axis inside of a button element. The code works just fine on Chrome but fails to center the element in Firefox and Safari. When I convert the button to a div the element will center as expected, however due to accessibility reasons this is not a feasible solution for me.

The only thing I can think of that is causing this problem is either a bug in the browser or some CSS property that is being set by the user-agent stylesheet that I am not aware of.

Expected result:

Expected result

Actual result:

Actual result

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>
Jon Koops
  • 8,801
  • 6
  • 29
  • 51

0 Answers0