Estou tentando centralizar elementos internos de um<button>-tag com flexboxjustify-content: center. Mas o Safari não os centraliza. Posso aplicar o mesmo estilo a qualquer outra tag e ele funciona conforme o esperado (consulte o<p>-etiqueta, rótulo, palavra-chave). Somente o botão está alinhado à esquerda.

Experimente o Firefox ou Chrome e você pode ver a diferença.

Existe algum estilo de agente de usuário que precise substituir? Ou qualquer outra solução para esse problema?

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>

E um jsfiddle:http://jsfiddle.net/z3sfwtn2/2/