Zentrierung Inhalt mit Flex in Safari

Question

Ich habe ein Problem mit dem Flex in Safari. Wenn ich zum Zentrieren Inhalts in Eingabe versuchen, es einige seltsame Wirkung hat:

CSS ist

input[type=submit] { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    max-width: 386px; 
    height: 47px; 
    margin: auto auto 0; 
    font-size: 1.25em; 
    line-height: 24px; 
    color: #fff; 
    background-color: #d08b4d; 
    border-radius: 24px; 
    -webkit-box-shadow: 3px 5px 10px rgba(0, 0, 0, .1); 
    box-shadow: 3px 5px 10px rgba(0, 0, 0, .1); 
    padding: 0; 
    border: none; 
    outline: 0; 
    cursor: pointer 
} 

Der gleiche Code i auf divs anwenden, es ist ok, hat Inhalt zentrale Lage in Block . Html dieses Teils des Codes

<form> 
<h3 class="form-title">Send a message</h3> 
<input type="text" name="name" title="name" placeholder="Name" required> 
<input type="email" name="email" title="email" placeholder="Email" required> 
<textarea name="message" id="" title="message" placeholder="Message" required></textarea> 

<input type="submit" value="Send"> 
</form> 

Mit anderen Browsern nicht ich irgendwelche prombles, sowohl mobile und Desktop. Dieser Code wurde auf Safari> 7 getestet. Gibt es eine native css-Lösung?

Answer 1

Ich war auf der Suche für dieses Problem auf Safari 9.1.2 und mir, was half Artikel zum Zentrum war die alte 2009 Flexbox Spezifikation:

display: -webkit-box; 
-webkit-box-pack: center; /* justify-content */ 
-webkit-box-align: center; /* align-items */ 

Versuchen display: flex; zu entfernen und sehen, ob es für Sie arbeitet.