Div Tag - Centre Horizontal and Vertical?

If the div which is supposed to be centered has a fixed size, you could use:

<div id="container" style="position:relative;height:100%;width:100%:">
  <div id="centereddiv" style="position:absolute;top:50%;left:50%;height:200px;width:200px;
       margin-left:-100px;  /* -0.5 * width */
       margin-top:-100px;  /* -0.5 * height */
       ">
       this is a 200x200 div
   </div>
</div>

You could also use
<div style="display:table-cell;vertical-align:middle;text-align:center;">
 <div style="text-align:left;">
  centered
 </div>
</div>

Regards

-r-

Thanks for the info, but I thought the 50% didn't give a true center???

And also if i am not wrong ... it appears that the above style uses CSS Level 2...

I wanted if possible to stick with CSS 1 as I am using PURE css for positioning i.e. No tables and what as many browsers as possible to be able to display the content

Ian

Hi coboldinosaur,

Great, thats cool thanks...

Sorry to sound stupid, but all i need to put is the script .... don't i need to update my attached style as such?? or delete the style altogether?

I prefer to use attached style sheets rather than inline ones....

To remind to you again.. currently my attached style is

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
}


I sort of understand it... this line

obj.style.marginTop=y+'px';

if the thing that applies a style to my div.... but this is inline isn't it??

So what should my attached style sheet be then if i use this way..

Again ... thanks once again for the help on the above

Can you recommend any good reference books either?? I have "more with eric meyer" but it is really an example type book and is missing a lot of the pure info....

thanks anyway..

ian

Hi coboldinosaur,

forgot to mention I am trying to keep within css1 rather css2 .. due to the fact that  i want as much cross browser support as possible... I presume this is the right way to go?

I notice that the following isn't supported with css1, so i would need an alternative

position:absolute;

top:

left:

thanks

Ian

You can leave the stylesheet as is.

Just ad the script to the head of the page.  

The code executes after the stylesheet has been loaded or when the page gets re-sized.  The code just modifies the rule for #main.  It is neither inline or a permanent part of the stylesheet. It is just a dynamic bit that reacts to the browser environment.

Cd&

Thanks Coboldinosaur!

It worked like a dream!... Just got one small query, wonder if you can help..

As you know by looking above at my posts... I want to use CSS ... I think this is the way to go rather than using tables, but I am trying to still appeal to as many browsers as possible so I am trying to stick with CSS1 - what do think about this?? the right way to go??

Anyway I use topstyle (css editor) which validate css for me and tells me if there are any potential problems..

I left my Css attached which is below but it gives the following warnings and errors, any ideas of how to get rouund this or is it just that Netscape Navigator has really bad support for CSS1, any ideas when NN4 was released, it  is very old now isn't it?? Should it be a worry for me do you think?

errors reported by Topstyle... just on NN4

 #main Netscape 4 doesn't center elements when using "auto" with margin-left/margin-right
  #main auto is not a valid value for margin-left
  #main Netscape 4 doesn't center elements when using "auto" with margin-left/margin-right
  #main auto is not a valid value for margin-right
  #main Netscape 4 adds extra line feeds when printing if margin-top is used.
  #main auto is not a valid value for margin-top
  #main auto is not a valid value for margin-bottom
  #main Netscape 4 handles "width" inconsistently, and sometimes not at all.
  #main Property height does not exist in this definition.

My attached CSS

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
}

Netscrap 4 was originaly released as beta in Dec 1996, and the actual browser released in May 1997.  The technology has rmained basically the same. Even though there have been some cosmetic releases:  A real attempt at CSS support was made with 4.5 in Oct 1998; which was a total disater, and to this day there are those whow will argue the only browser in history that was more unreliable than 4.5 was 4.51; which was suppsot to be a "fixed" version.

Netscrap 4 was doomed from that point even though they continued to try and upgrade it:
4.6 Update May, 1999
4.7 Update Sep, 1999
4.79 Update Nov. 2001 (the same month Netscrap 6, debuted and set a record for the number of bug reports)
4.8 Update Aug. 2002 (It's rare to find anyone who actually "upgraded" to this final version)

Market share for N4 is less than 1%.  If you check your server logs you will probably find none of your visitors are using it, or the number is so low you cannot justify the extra development and maintenace costs to continue support the obsolete technology.

>>> is it just that Netscape Navigator has really bad support for CSS1,

Even HTML4 is not well implemented.  When Netscrap 4 was introduced HTML 3 was state of the art; CSS was little more than a good idea; DOM1 and XML were vague, strange concepts and a 14.4k modem was considered a high speed connection.  For that environment it was optimized, but Netscrap decide to spend their time taking Microslop to court instead of improving the technology; so the went from a 90% market share to little more than a blip.

The hope for the future is in Mozilla and open source.  Then next couple of years will be interesting.

Cd&

Thanks COBOLdinosaur,

Great insight... thanks .. thats what I figured...

SO TO SUMMARISE?

So ignore netscape 4 .. "BUT" design for CSS1 rather than CSS2 currently.... That way I hit more browsers???????




I am awarding points now, you were great!

You don't have to avoid CSS2.  Adoption of CSS in modern browser is evolutionary, and with each release more is there.  Modern browsers will ginore what they don't support, so it is possible to use an advanced feature that may only show up in the lastest release without harming the rendering of earlier releases.  The approach I take is to try something in Mozilla, if it works; then I look at it in IE6 and whether it works or not I keep it as long as it does not mess up the rendering in IE6.  Those are the only 2 browsers I worry about supporting; and because Mozilla is the superior browser I develop for that paltform, and then get it acceptable for IE.

Glad I could help.  Thanks for the A. :^)

Cd&

Msg for Coboldianosaur,

hi there,

Remember you helped me with this, and all seemed well but think i made a mistake...

I have uploaded the site to http://www.cuttingedgedesigns.biz/   it is actually on a page called default.aspx

I got the javascript in there but it doesn't seem to center vertically, i thought  it did

Sorry to be a pain... could you take a look for me??

Much appreciated, i probably made some silly mistake

This is the javascript as per your msg I inserted into the Head of my page

<script type="text/javascript">
function setPos()
{
DB=document.body;
obj=document.getElementById('main');
y=(DB.scrollHeight>DB.offsetHeight)? DB.scrollHeight : DB.offsetHeight;
hgt=obj.offsetHeight;
y=Math.round((y/2)-(hgt/2));
obj.style.marginTop=y+'px';
}
onload=setPos;
onresize=setPos

Just one thing, after the onresize .. should there not be a semi colon ; ???

Here is the MAIN css which i left as original per your instruction ..

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
}

Best regards

Ian

Actually, it is working exactly correctly.  The problem is you are not asking the browser for what you actually. If you put a border around main you will see it has the correct margins all the way around.  The problem is that is not what you want centered. You want the content of main centered.  That is a complete different thing you have to add text-align:center to the style for main so that it move the content.
It ends up looking like this for the CSS:

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
text-align:center;
}

And the page code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
    <title>default</title><meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <link href="default_files/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function setPos()
{
obj=document.getElementById('main');
var x,y;
if (self.innerHeight) // all except Explorer
{
      x = self.innerWidth;
      y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
      // Explorer 6 Strict Mode
{
      x = document.documentElement.clientWidth;
      y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
      x = document.body.clientWidth;
      y = document.body.clientHeight;
}
wid=obj.offsetWidth;
hgt=obj.offsetHeight;
x=Math.round((x/2)-(wid/2))
y=Math.round((y/2)-(hgt/2));
obj.style.position='absolute';
obj.style.left=x+'px';
obj.style.top=y+'px';
}
onload=setPos;
onresize=setPos;
</script>
</head>
  <body>
    <form name="Form1" method="post" action="Default.aspx" id="Form1">
<input name="__VIEWSTATE"  value="dDwyOTg5NTI1OTE7O2w8SW1hZ2VCdXR0b24xOz4+/+JG4/2BEAPlL2bwrfqh33c4UvA=" type="hidden">

    <div id="main">
<p><a href="http://www.cuttingedgedesigns.biz/main.aspx"><img  src="default_files/total_care_large.gif" border="0" height="199" width="312"></a><br><img  id="Image1" alt="" border="0"><input name="ImageButton1" id="ImageButton1" alt="" border="0"  type="image">  
</p>
<p>        
        Recommended Browsers: IE 5.5+, NN 4.0+<br>
        Cookies are
exentesively used throught the site </p>
      </div>
  </form>
      
  </body></html>


Cd&

ahhh i see...

But i was keeping my eye on the Div displayed in IE (using the scrollbars :-)) and i couldn't see the div tag being centered Vertically.....

So basically this is going to center the contents inside? and Not actually the

Hi there,

THanks for your continued support on this... I just put a border around the div so i can actually see the DIV and if make the windows Grow and shrink Horizontally then its great i see the DIV tag moving as the window changes..

But vertically not.. I thought I would have been possible (using your method) to have the DIV center (not contents) vertically too.. hence if the DIV centers vertically also then everything inside would also move - no??

Or am I barking up the wrong tree?? I have uploaded my new css which now looks like this

#main
{
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:750px;
height:500px;
border: 2px solid;
}

so hence you can see the border..

So now you can see how the border moves horizontal ie. Centers but vertically not..

cheers ian

oooppss. forget this
-----------
ahhh i see...

But i was keeping my eye on the Div displayed in IE (using the scrollbars :-)) and i couldn't see the div tag being centered Vertically.....

So basically this is going to center the contents inside? and Not actually the
---------------

I was making some notes to myself and sent it by accident :-) .. it starts with "Hi there"

www.cuttingedgedesigns.biz