Flexbox не работает с кнопками или элементами fieldset

Я пытаюсь центрировать внутренние элементы<button>тег с флексбоксомjustify-content: center, Но Safari не центрирует их. Я могу применить тот же стиль к любым другим тегам, и он работает как задумано (см.<p>-тег). Только кнопка выровнена по левому краю.

Попробуйте Firefox или Chrome, и вы увидите разницу.

Есть ли какой-либо стиль пользовательского агента, который я должен перезаписать? Или любое другое решение этой проблемы?

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

И jsfiddle:http://jsfiddle.net/z3sfwtn2/2/