Centering an element with CSS

Centering an element with CSS is not as hard as you might think. Basically you need to set the horizontal margin of the element to auto and the vertical margin to whatever it is that you want.

Here’s the code:

.DIVelement {margin:0 auto;}

Take note that I’m using the shorthand property for the margin property. You might want to check out Roger Johansson’s Efficient CSS with shorthand propertiesto learn about this technique.

You can apply this trick to everything from images, id elements to paragraphs. Some web designers who are addicted to centered layout pages uses this to position the main content area.

More on CSS centering :

• CSS Centering 101