How to center a wrapper div, not content

Question

I want my page to always be centered in the browser without affecting the content (e.g. align-text: center; does). I want to focus on my wrapper div. How can I do it?

Simplified Existing Page:

<div id="wrapper"> <div id="header"> Music Heaven </div> <div id="topmeny"> </div> <div id="menu"> </div> <div id="content"> </div> <div id="bottom"> SiteAdmin </div> </div> 

Whole fiddle: http://jsfiddle.net/EndQb/

Answer 1

  #wrapper { width: ... margin: 0 auto; } 

no need to set text alignment

Answer 2

Set your style somehow as for a wrapper div.

 #wrapper { width: 841px; margin: 0 auto; 

}

This way the wrapper div will always be centered according to the width of the screen. Hope this helps.

Answer 3

you can set margin property for div wrapper as shown in CSS

 #wrapper { margin:20px auto }