Centering Your Layout Using CSS
Centered layouts are more attractive than layouts which are aligned to the left, or worse, to the right.
The easiest way to align a layout is to use a div container, and style it with CSS tags. Many people use the position:absolute; style to center the layout, and although this may work when they view the layout, if you view the page in a different browser or window size, the layout is likely skewed to one side or the other. This is because the container div has been positioned using top, bottom, left or right directions, and will stay in those positions, regardless of the screen resolution.
When creating a new layout, I usually create a div called container, and inside this div I have everything else. This makes centering the layout easy, as you just need to center the container div, and everything else will shift as it’s a part of the container div.
First, copy the following code and paste it into wherever your CSS is kept. Most layouts should have a separate file called style.css or stylesheet.css where all the CSS is kept.
Next put the container div around all the content on your site.
Right after your tag, open the div container with .
Right before the tag, close the div container with
.
Internet Explorer sometimes doesn’t recognize this code, so you should include text-align:center; into the container div’s CSS: