html - Safari でボタンが中央揃えにならない

Question

Safari ブラウザーでのみ、ボタンが中央に配置されません。

JSFドル

HTML

<div class="" style=" width: 100%; ">
    <input value="Button" class="center-block" type="submit" style=""/>
</div>

CSS

.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}

上記の問題はSafariで発生します。Chrome と Firefox では正常に動作します。

Answer 1

btn の幅を設定しない場合:

1. 親 -text-align: center
2. ボタンの子 -display:inline-blockの代わりに使用display: block

.wrap {
    text-align: center;
}
.center-block {
    display: inline-block;
}

<div class="wrap">
    <input value="Button" class="center-block" type="submit" />
</div>