Estoy tratando de centrar elementos internos de un<button>-etiqueta con flexbox'sjustify-content: center. Pero Safari no los centra. Puedo aplicar el mismo estilo a cualquier otra etiqueta y funciona según lo previsto (consulte el<p>-etiqueta). Solo el botón está alineado a la izquierda.

Prueba Firefox o Chrome y puedes ver la diferencia.

¿Hay algún estilo de agente de usuario que deba sobrescribir? ¿O alguna otra solución a este 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>

Y un jsfiddle:http://jsfiddle.net/z3sfwtn2/2/