title: How can I vertically align a <table> in the middle of a fixed height <div>?
body: <p>Why does the code below not cause the <code>&lt;table&gt;</code> to be vertically-aligned in the middle of the <code>&lt;div&gt;</code>?</p>
  
  <pre><code>&lt;div style="width: 850px; height: 470px;vertical-align: middle;" align="center"&gt;
          &lt;table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
              &lt;/tr&gt;            &lt;tr&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I want the <code>&lt;table&gt;</code> in the middle of the <code>&lt;div&gt;</code>, but it is at the top! How can I fix this?</p>
  
  <p>Thanks for your future advice.</p>