CSS Center Forms Vertically and Horizontally

I am setting an image as a background inside a DIV and and want to center (vertical and horizontally) two select boxes. I am able to center the forms horizontally, but vertically, doesnt happen. The forms center at the bottom of the DIV.

Here is my CSS:

#box
{
background-image: url(../images/box.gif);
background-repeat:no-repeat;
display: table-cell;
vertical-align: middle;
width:665px;
padding-top:65px;
text-align:center;
}

Here is my HTML:

<div id="box"> 
<select id="Select0">
<option selected>Show Selections By</option>
<option value="1">value1</option>
</select>
<select id="Select1">
<option selected>Select State</option>
<option value="1">value1</option>
</select>
<input type="image" onclick="jsfunsrcg()" src="./images/submit.png" alt="Submit Button">
<input type="image" onclick="jsfunsrc="./images/reset.png" alt="Reset">
</div>

I have been looking at web resources, and trying other options with margins, which has resulted 开发者_Go百科in the box DIV moving all over the page. I moved everything back to square one, and thought I would ask for some advice from the community... Appreciate any input anyone cares to add. Thanks, --Matt

It's your padding. Turn it off and give the box an explicit height. http://jsfiddle.net/SZ8jS/

Perhaps something like this would work in this situation:

<style>
  #box{
    width:665px;
    height:100%;
    background-color:green;
    text-align:center;
  }

  #box2{
    position:relative;
    top:50%;
  }
</style>

<div id="box">
  <div id="box2">
    <select><option>1</option></select><select><option>a</option></select>
  </div>
</div>

For #box, you can change the height to be something other than 100%, for example, 200px and the selects still should center both vertically and horizontally.