Center div in height

[kimikai]

So I have a website that's made with layout measurements for a common used screen (1024x768 or w/e it exactly is). I used a bg color to fill up the white space as soon as the screen is bigger than this.
Now basically that all works fine, but my website is aligned to the top on bigger screens (so it leaves a huge colored bg space underneith).
Is there a way to center my div to like...the middle of the screen, so itll have room on the bottom and top on bigger screens??
Also its not like i have a big div and something inside needs to be centered.
I really need the whole div to be centered.

[mlegg]

What is a link to the page? or at least post the coding for it

[ApacheTech]

Centreing Vertically.

CSS level 2 doesn't have a property for centreing things vertically. There will probably be one in CSS level 3. But even in CSS2 you can centre blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

The example below centres a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centred vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.

//CSS Style
#container
{
    min-height: 10em;
    display: table-cell;
    vertical-align: middle
}

//HTML Code
<div id="container">
  <p>
       Vertically aligned text</p>
</div> 

[kimikai]

Ill try to show what i mean by 2 paint pictures,, just rough sketches of what i mean,, and then post the HTML and CSS code with it.

What i have now is:

The Darkblue is the div that contains all of my website (the divs name is "all" in the coding) right now, its centered to middle horizontally but to the top vertically which leaves an ugly background spot (which is huge in my opinion) down the bottom on bigger screens.

What i want is this:

The Darblue again is the div that contains all of my website, just what i basically want is that its both horizontally and vertically centered. I just have no idea how to do this, also i dont know if its maybe smarter to make a big table that contains all the other divs, instead of a div that contains all the divs??

This is the HTML:

<div id="all">
<div id="header_wrap">
<div id="header">
</div>
</div>

<div id="main_wrap">
<div id="site_wrap">
<table width="941" height="402" border="0" align="center">
  <tr>
    <td width="162" background="images/menu_bg.jpg"><iframe name="menu" src="menu.html" frameborder="0" width="162px" height="402px" allowtransparency="true" scrolling="no"></iframe></td>
    <td width="14"></td>
    <td width="751" background="images/content_bg.jpg"><iframe name="content" src="home.html" frameborder="0" width="751px" height="402px" allowtransparency="true" scrolling="auto"></iframe></td>
  </tr>
</table>
</div>
</div>
</div>

This is the CSS:

#all {
	width:100%;
	height:673px;
	}

#header_wrap {
	width:100%;
	height:263px;
	margin-top:auto;
	background:url(images/header_bg.jpg);
	}
	
#header {
	width:960px;
	height:262px;
	margin:0 auto;
	margin-top:auto;
	background:url(images/header.png);
	}

#main_wrap {
	width:100%;
	height:410px;
	margin:0;
	background:url(images/rest_bg.jpg);
	}
	
#site_wrap {
	width:960px;
	height:410px;
	margin:0 auto;
	background:url(images/rest_bg.jpg);
	}

[ApacheTech]

Read this: http://www.w3.org/Style/Examples/007/center.en.html

[kimikai]

I got as much,, but the thing that worries me is that i dont have a block thats as big as the window...
Does this mean ill have to make the div that has everything inside as big as the window or just give the div id="all" the css: display: table-cell; vertical-align: middle; command??

[ApacheTech]

If that's how you want it, yeah. You can create <div id="sitewide"></div> as a wrapper for your whole page. Or you could just use the fullcreen example given and use your own dimensions for the div.

[kimikai]

Ive tried all kinds of codes into the CSS now...also the one from the example... but somehow its just not coming together. When i use display table-cell with vertical align nothing happens. When i try something with top % its not working, position absolute isnt working either.
How am i going to set up the coding i just dont see it anymore

The div="all" should be the one that wraps the whole website and that gets the coding for the vertical alignment. Its just not doing what its supposed to do

[ApacheTech]

There may be something in CSS3, have a look at http://www.wiibart.com/vertical-centering-with-css3

That was just one of many pages from a simple web search with your favourite search engine.

[kimikai]

fixed it,, after a lill longer of looking around i found a way to actually get it done ^-^

tnx for the help tho