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