Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



Centering a Web Page

Here are two methods to center web page content. The first method is to use a fixed width for your content area. The second method is to fix your margins of your content area.

Centering fixed width content
<body style='text-align: center'>
  <div style='width: 760px; margin: auto; text-align: left'>
	This is aligned left in a centered box.
  </div>
</body>
	
See Sample Page

 

Find another centering method below:


Centering content to page width

This method of centering page content adjusts the size of the content such that it has consistent margins with the left and right edges.

<body>
  <div style='margin-left: 20%; margin-right: 20%;'>
	This is aligned left in a centered box.
  </div>
</body>
	

See Sample Page

Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/css-centering.html'>Methods to center content on a web page using css and html</a>