Question

Why is this:

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

and this CSS:

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

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

work in desktop browsers but doesn’t work in iphone sfari?

on desktop browsers it is centered an on mobile it is aligned to the right, as if there is no centering.
is there a better method to center the main div on the page?

Answer 1

try this

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

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