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;
}