Horizontal & Vertical Center Positioning

[Ronnyboy]

Hi Guys & Gurls!!

I need some help!

I want to center a div (with border and contents) horizontal and vertical. How do i do this, everything i try doesn't work!

Greetz,

Ron

[Paul O'B]

Hi,

Vertical centering is a bit awkward in CSS unless you are using tables etc.

Here's a routine that works in cases where you know the width and height of the element.

<style type="text/css" media="screen">
html,body {
height: 100%; 
}
.central {
position: absolute;
left: 50%;
top: 50%;
margin-top: -xxpx; /* where xx = half your elements height */
margin-left: -xxpx; /* where xx= half your elements width */
}
</style>

The above will centre horizontally and vertically

To just centre horizontally you can use margin-left:auto and margin-right:auto on an element that has a width specified. However you will need to add a text-align:center for ie5 /5.5 to the parent of this element for that browser to centre.

Hope that helps.

Paul

[Ronnyboy]

Thnx Paul!

It works very well! I hope it keeps on working

Greetz,

Ron