Centering DIV's

RockerMan · 1 Centering DIV's Sat Jul 17, 2010 6:14 am

RockerMan

Technician

Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser : Firefox

Centering DIV's
Tricks to center align DIV elements

OK so I get alot of questions on how to center DIV's. Here is a quick tutorial to center DIV's Horizontal and vertical.

So it is as easy as applying a margin to the div:
This will center it horizontal...

Code:: .className{ margin:0 auto; width:200px; height:200px; }

To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins (you do remember the shorthand declarations in CSS don’t you?). This method works on block level elements (divs, paragraphs, h1, etc). To apply it to inline elements (like hyperlinks and images), you need to apply one additional rule – display:block.

To center it both ways it is a little more tricky, you will need the exact dimensions of the div...

Code:: .className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; }

By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Offsetting the div by 50% from the left and the top part of the window, you have its upper-left corner precisely at the center of the page. The only thing we are left to do is to move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.

Thanks for reading!

If you have any questions please just ask me via PM or through the forums

Mike Like a Star @ heaven