title: Vertically aligning table within container div
body: <p>I'm trying to align a table of dynamic size within a parent div. The parent container's height is set, and the inner table's height is unknown (variable). I don't think margins/relative positioning adjustments will work since the size of the table is unknown. Can this be done? Right now the code looks like:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
   &lt;div id="board"&gt;
        &lt;table id="evolve"&gt;...&lt;/table&gt;
   &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#wrapper {
      width: 100%; 
      height: 100%; 
  }
  #board {
      position: relative;
      margin: auto; 
      width: 265px; 
      height: 222px; 
      text-align: center;
      vertical-align: middle;
      border: 1px solid black;
  }
  .evolve {
      border: 1px black solid;
      margin: auto;
      position: relative;
  }
  </code></pre>