css - ページの Div センターはデスクトップでは機能しますが、モバイルでは機能しません

Question

どうしてこれなの：

  <div class="page" role="main">
    <div class="gallery">
    </div>
  </div>

そしてこのCSS：

.page {
  width: 100%;
  height: 100%;
}

.gallery {
  margin: 0 auto;
  width: 320px;
}

デスクトップブラウザでは動作しますが、iphone sfari では動作しませんか?

デスクトップ ブラウザでは中央に配置され、モバイルでは中央に配置されていないかのように右に配置されます。
メイン div をページの中央に配置するためのより良い方法はありますか?

Answer 1

これを試して

.page
{ 
width: 100%;
height: 100%;
text-align:center;
margin:auto;
}

.gallery {
  margin: auto;
  width: 320px;
}