WindowsPCで各ブラウザで確認したとことですが、Safariでの確認は行なっていますか？
cssでflexを使う場合、flexコンテナ（今回でいうdiv)にwidthを指定してあげないと、Safariでレイアウトが崩れることがあります。
以下のように、flexコンテナにwidthの指定をしてみてください。
/*CSS*/
div{
/*＝任意の値＝*/
width: 500px;
/*＝＝＝＝＝＝*/
display: flex;
justify-content: center;
align-item: center;
}
div p{
width: 100px;
}
