Center align fluid layout

How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?

i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. 开发者_运维百科iPad).

I think the following solutions would not work in my case;

1. Using width:100% (there won't be any space left to center align)

2. Using widdth:80% or so and then using margin:0 auto (this would work fine on desktops, but would waste space on mobile devices..i.e i want to optimize limited space on mobile devices)

3. Using text-align:center (I want to center align the layout and not the text)

Please suggest.

<div style="width:100%; text-align:center;">
        <img style="margin:auto; display:block;" src="images/web_banner.gif"/>
        <p>Website coming soon…</p>
</div>

Use align="center" in div then u will get content in div will center

It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the

width: 80%;
margin: 0 auto;
text-align: center;

iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.

Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation

text-align: left;