safariでbuttonタグにdisplay:flexが効かない問題

buttonタグを使って表現する時に困った事です。

このようなボタンを表現する時に

<button>さらに記事を見る</button>

のように作るとしてcssで

button {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-contente: center;
}

のようにテキストを上下中央にするようにした時に、思ったように言ってくれない場合があります。

Windows 10 – Chrome : ○
Windows 10 – Firefox : ○
Windows 10 – Edge : ○
Windows 10 – IE : ○
macOS 10 – Chrome : ○
macOS 10 – Safari : ×
Android 7 – Chrome : ○
iOS 10 – Chrome : ×
iOS 10 – Safari : ×

xのついているのがうまくいかないブラウザです。

対応策としては

<button>
  <div>さらに記事を見る</div>
</button>

のようににして、buttonの子要素のdivにdisplay:flexを設定してあげるようにする方法があります。