title: CSS Center Forms Vertically and Horizontally
body: <p>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.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="box"&gt; 
  &lt;select id="Select0"&gt;
  &lt;option selected&gt;Show Selections By&lt;/option&gt;
  &lt;option value="1"&gt;value1&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="Select1"&gt;
  &lt;option selected&gt;Select State&lt;/option&gt;
  &lt;option value="1"&gt;value1&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="image" onclick="jsfunsrcg()" src="./images/submit.png" alt="Submit Button"&gt;
  &lt;input type="image" onclick="jsfunsrc="./images/reset.png" alt="Reset"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have been looking at web resources, and trying other options with margins, which has resulted 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</p>