how to center div in middle of browser viewport like google

I have a search website that needs to have the search bar and logo centered vertically and horizontally in the index page as its the only items on the page.

What is the best and most effective way to implementing 开发者_运维技巧this

here's an easy way to do it, though it won't work in IE6, which doesn't support position:fixed. If you want IE6 support, use position:absolute, but ensure the page content isn't longer than the height of the viewport.

#box {
    position: fixed;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
}

#box table {
    height: 100%;
}

#box td {
    vertical-align: middle;
    text-align: center;
}

and the HTML:

<div id="box"><table><tr><td>
YOUR HTML CODE HERE
</td></tr></table></div>

THAT SAID...

You probably shouldn't do this though. You'd be better off simply adding 50-100 pixels of padding at the top if you're simply going for a look that avoids having your content hard up against the top of the page.

for css-only approach check out this fiddle. http://jsfiddle.net/jeffrod/nFthS/

it requires that the width and height of the center box be known. it positions the top left of the box in the middle and then, using margins, shifts it back so that the center of the box is at the center of the page.

<style>
div.center {
  position: fixed;
  width: 320px;
  height: 240px;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -160px;
}
</style>

<div class="center"><!-- search bar --></div>

but I don't know if this is the best way