title: vertical centering of list items
body: <p>I have read many articles about vertical centering but I’m afraid not many of them are intuitive, hence unable to apply it to my problem. Basically, I have a main div and in there, I’ve got unordered list which has an image and paragraph tag within it and are displayed using inline-block. This aspect of the work is fine.</p>
  
  <p>The problem or what I am trying to achieve is to have the list centered in the middle of the screen. So for instance, if I have got just one item in the list, it should be in the middle and then move upwards as more items are entered in the list.</p>
  
  <pre><code>&lt;div id = "main"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;img src="test.jpg" alt="#" /&gt;
              &lt;p&gt;Lorem ipsum&lt;/p&gt;          
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  #main {
      margin: 60px auto;
      height: 400px;
  } 
  #main ul li {
      display: inline-block;
      vertical-align: top;
      margin: 0 13px 72px 22px;
      height: 100px;  
  }
  
  #main ul { 
      text-align: center;
  }
  </code></pre>