title: Vertically align 'li' middle in 'ul'
body: <p>I have a simple unordered list like so:</p>
  
  <pre><code>&lt;ul class="flavours"&gt;   
       &lt;li&gt;Chocolate&lt;/li&gt;
       &lt;li&gt;Caramel&lt;/li&gt;
       &lt;li&gt;Watermelon&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><code>&lt;ul class="flavours"&gt;</code> has a <code>min-height</code> of <code>200px</code> and it grows as more <code>&lt;li&gt;</code> elements are added to the list via jQuery ui drag and drop library.</p>
  
  <p>When there is just one or two <code>&lt;li&gt;</code> elements in the list, how can I vertically align these in the middle of the whole <code>&lt;ul&gt;</code>. So as when the height is <code>200px</code> the items would be dead center, horizontally and vertically. Currently they are just positioned center top.</p>