Have a
look at this URL.
and this
This is from the first url..
Code:
Negative margins
The negative margins technique allows to center a block for which the dimensions are known.
Centering can be horizontal, vertical or both.
For a container block of 700 px by 400 px. We want it exactly centered within the navigator no matter the definition used (800x600, 1024x768 or more).
The trick is to first place this block at 50% top and 50% left, which will place the upper left corner of the block in the middle of the page.
Then we will define negative margins with a value that is exactly half of the width and height of the block, which will position it exactly in the middle of the page.
Here is the CSS code for the container:
#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px; /* half of the height */
margin-left: -350px; /* half of the width */
border: 1px solid #000;
}
Then place the container right below the <body> tag:
<div id="global"></div>
Now the block is centered.(View result here)
Note: Negative vertical margins in CSS seem to be causing problems on Explorer / Mac.
(Liberally inspired from http://bluerobot.com/web/css/center2.html)
Print article
Raphael GOETTER
www.alsacreations.com