title: Vertically centering a <div> element
body: <p>I've been attempting to center a sidebar vertically, I centered it horizontally however.  I'm aware of the display:table; but that's not what I want to do, because I'm going to be putting the main content area right next to the sidebar.  Here's the code and style:</p>
  
  <pre><code>&lt;div class="sidebar"&gt;
      &lt;ul&gt;
          &lt;li&gt;Homepage&lt;/li&gt;
          &lt;li&gt;blah&lt;/li&gt;
          &lt;li&gt;blah&lt;/li&gt;
          &lt;li&gt;blah&lt;/li&gt;
          &lt;li&gt;blah&lt;/li&gt;
          &lt;li&gt;blah&lt;/li&gt;
          &lt;li&gt;blah&lt;/li&gt;
          &lt;li&gt;blah&lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.sidebar{
      background-color:       #DEFFFF;
      width:                  156px;
      height:                 385px;
  }
  
  div.sidebar a{
      color:                  black;
      display:                block;
  }
  
  div.sidebar ul li{
      margin-left:            -33px;
      list-style-type:        none;
      width:                  140px;
      height:                 25px;
      border-right:           1px solid black;
      border-top:             1px solid black;
      border-left:            1px solid black;
      background-color:       #BCA264;
      font-family:            bold;
  }
  </code></pre>