Centering horizontally with CSS

Try to center a web page like wordpress blog with css.


add this to you main container inside <body>

usually a <form> with this css properties.


  margin-left : auto ;

  margin-right : auto ;

  width : 700px ;

  height : 100% ;

  text-align : left;


width means the width of the content you want to show.

text-align : left I am going to explain it.

with this setting you can see the aligning is working in FF.


But IE6 will fail because it ignores margin-left and margin-right.

We need to get around this by adding this CSS property.

text-align: center;

This will going to cause you trouble since all the things inside <body> is

now centered! That’s why we set text-align : left previously.


I play this with Icefaces and Tomcat.

Your page should look alright now.