4 replies [Last post]
Last seen: 18 years 25 weeks ago
Joined: 2003-12-09
Posts: 3
Points: 0

Try this:

#centre {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 70px;
margin-top: -35px;
margin-left: -100px;
font: 10px Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
text-align: center;

<div id="centre"> - that's how I spell it, I'm English Wink - should sit right in the middle of your screen. To edit this, just make sure that the margin-top remains half the height value and the margin-left remains half the width value.

Bill Posters
Last seen: 18 years 24 weeks ago
Joined: 2003-12-15
Posts: 9
Points: 0

Centering horizontally/vertically without scripts

Just for the record...

The negative margin kludge method doesn't work as it should in MSIE5/Mac when used with any full DTD or a partial XHTML DTD.
The only two DTD options I've seen it work properly with is any partial HTML4 DTD - or no DTD at all.
Both of those DTDs are likely to be beneath consideration for anyone serious about moving to CSS-based layouts (and rightly so).

html, body {
height: 100%;

...should correct the problem in effected browsers, but MSIE5/Mac still gets it wrong by assuming that the height value of 100% should equate to the actual width of the canvas area*, rather than its actual height.

e.g. if the canvas area is 750px wide, then MSIE5/Mac (with fully compliant DTD and html, body { height: 100%;} css will ignore the actual canvas height and assume it to be 750px high, so will vertically position the div according to that figure.

This means that a standards compliant page using the negative margin kludge will only work properly in MSIE5/Mac when used in square canvas areas, but will either position the div too high when the canvas height>width and too low (with scrollbars) when the canvas width>height.

It may be worth bearing this problem in mind if MSIE5/Mac users form a significant portion of a site's visitors.

(* by 'canvas area' I'm refering to the actual display area within all the browser chrome)

Last seen: 18 years 18 weeks ago
Joined: 2004-01-21
Posts: 1
Points: 0

Problem centralizing div on screen

Im using the code:

<div id="divAguarde" sttyle="display:none;position:absolute;top:50%;left:50%">
<table width="110" height="60" > <tr><td align="center" width="100%">
	Processing	...

And it centralize ok.
My problem is that my page is really long and when Im down in the botton and I make this div's display visible, it shows in the beginning of my page and not always in the center of where I am.
How can I make it show in the center of the screen Im at, even if I have scrolled down my doc ?

thx in advance, Im desperate !!!!!!!!!!!!!!!!!! :?

dJomp's picture
Last seen: 6 years 17 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Re: Problem centralizing div on screen

gidazzi wrote:
Im using the code:


Nice code; that's a known way of doing things with tables, but I think we were trying out CSS solutions!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Stu's picture
Bristol uk
Last seen: 18 years 18 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Centering horizontally/vertically without scripts

How about an IE6 only method

(my site BTW - and thanks for adding a link in your 'Useful CSS Links' section).
I hope to be popping into this forum as often as I can.

It's not what you do it's the way that you do it.
So do it with STYLE