Tue, 2003-12-09 13:23
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 
- 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.
Mon, 2003-12-15 09:10
#1
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)
Wed, 2004-01-21 00:10
#2
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 ... </td></tr></table> </div>
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 !!!!!!!!!!!!!!!!!! :?
Wed, 2004-01-21 09:16
#3
Re: Problem centralizing div on screen
gidazzi wrote:
Im using the code:
<snip>
Nice code; that's a known way of doing things with tables, but I think we were trying out CSS solutions!
Wed, 2004-01-21 13:26
#4
Centering horizontally/vertically without scripts
How about an IE6 only method
http://www.s7u.co.uk/ie/exampletwo.html
(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.