>


Easy CSS Centering

Andrew Martin
Creative Director


The invention and evolution of CSS over the past decade has revolutionized web design. Making it a much more efficient and flexible medium. This is not absolute, however, as there are still a few things that are a lot easier to do with tables (no matter how many times you flame me, web standards Nazis, it is still true). One of them is centering your entire website on the page. My personal opinion is that, over the years, I have cut back my use of tables for layout to a reasonable level - I don't use them unless I have a good reason. That said, I found many of the ways used to center entire sites using pure CSS to be cumbersome, until I came across this particular one. Unfortunately, I can't remember where. Regardless, here is the simplest way I know of to use pure CSS to center your entire webpage.

  1. You must use absolute positioning on your <div> tags. (Learn about CSS positioning)
  2. You must calculate the width of your entire site, in pixels. Remember this number.
  3. Use the following code in your stylesheet (this code assumes a site width of 800px, so make sure to substitute with your own numbers): 
    #wrapper {
	position:absolute;
	left:0px;
	top:0px;
	width:800px; /* width of site here */
	left: 50%;
	margin-left: -400px; /* divide site width by 2 */
}
  4. Place the following code in your HTML files (notice that the <div> tag and its respective closing tag are the first and last tags in the <body> section of your HTML, hence the name 'wrapper'): 
    <div id="wrapper"> <!-- place directly after the <body> tag -->
<!-- all the rest of your HTML goes here -->
</div> <!-- place directly before the </body> tag -->
  5. If you are using a site with a fixed height, you can use the same tactic to vertically center the entire page, replacing the CSS code with the following (code assumes that the site is 800px wide and tall): 
    #wrapper {
	position:absolute;
	left:0px;
	top:0px;
	width:800px; /* width of site here */
	left: 50%;
	margin-left: -400px; /* divide site width by 2 */
        height:800px; /* height of site here */
        top: 50%;
        margin-top: -400px; /* divide site height by 2 */
}
There you have it. If you would like to see a working example, check out the Home Inspections Plus site and its stylesheet. Note that this site uses horizontal centering only, as we tend to make variable-height sites.

Web Design


Send consumers the ideal message with a custom-tailored web solution from Regal Creative. An extraordinary website doesn't need to cost a fortune; let us show you how affordable a cutting-edge web presence can be, whether your business needs a 'brochure-style' HTML website, a feature-rich content management system, or an advanced e-Commerce platform.

Search Engine Optimization


A high quality website can't live up to its full potential without a high quality stream of traffic! Regal Creative will analyze your traffic and search placement goals, as well as your keyword competition, to create and implement a strategy to greatly increase your search engine performance by means of link building and page optimization.

Graphic Design


Effective, visually appealing graphic design takes years to master. With over a decade of design experience, Regal Creative's creative team can provide your business with extraordinary logo design, print media design (business cards, brochures, postcards, etc.), and trade show display design services, and do so at an affordable rate.