How to change many absolute div positions in the center of the mobile screen when changing orientation?

Question

I have a lot of absolute div position, how can I change its center alignment when changing the orientation to the center?

allows

<div style="position:absolute; top:0px;left:0px">
  <div style="position:absolute; top:0px;left:11px">asd</div>
  <div style="position:absolute; top:0px;left:15px">asd</div>
</div>

I tried margin: 0 auto, and it also ran into absolute.

the reason to have positioning as absolute is because there will be animation divs and many divs will flush in place

Answer 1

You need to get rid of positioning and set the widths and margins for each orientation to do this job.

It is based on

 /* Portrait */
@media screen and (max-width: 320px)

and

/* Landscape */
@media screen and (min-width: 321px)
{

CSS methods

I created an example for you here .

, URL- jsbin iPhone emulator .

Answer 2

,

<div style="position:relative; margin: 0px auto;">
  <div style="position:absolute; top:0px;left:11px">asd</div>
  <div style="position:absolute; top:0px;left:15px">asd</div>
</div>

, : 0 : 0 div div

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 3

So simple

.[you-class-name]{
 ......
 Other element for design the div
 .........................
 left: 50%; //Most Import to align center of screen, tested in all browser
}