title: Need to horizontally and vertically center align UL in DIV, and vertically center align the list elements which are text and images
body: <p>I am trying to do the following:</p>
  
  <ol>
  <li>Vertically and horizontally center a list within a div.</li>
  <li>Vertically center the list items.  One item is an image, the others are text.</li>
  </ol>
  
  <p>I've looked at a many solutions but can only manage to get the list horizontally centered.  I cannot get the list centered vertically.  And I cannot get the list items centered vertically.</p>
  
  <p>How can I achieve this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('ul.nav a').bind('click', function(event) {
      event.preventDefault();
      var $anchor = $(this);
  
  
      $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
      }, 1500);
  
      event.preventDefault();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  body {
    letter-spacing: -1px;
  }
  .section {
    margin: 0px;
    height: 100vh;
    width: 100vw;
    background: url(../images/white.png) no-repeat center center fixed;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .img-circle {
    border-radius: 50%;
    height: 100px;
    width: 100px;
  }
  .navbar {
    height: 160px;
    width: 100%;
    position: absolute;
    top: 0px;
    background: #fff;
    color: #000000;
    font-family: 'Lato', sans-serif;
  }
  .navbar:hover {
    background-color: #787878;
  }
  .contents {
    top: 160px;
    width: 100%;
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-size: 16pt;
    font-style: none;
    letter-spacing: -1px;
  }
  .section h2 {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    text-align: center;
  }
  .section p {
    width: 600px;
  }
  .navbar ul {
    list-style: none;
  }
  .navbar ul li {
    float: left;
    padding: 15px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
  }
  .navbar ul li a {
    color: #000;
    text-decoration: none;
  }
  .navbar ul li a:hover {
    text-decoration: none;
    color: #000;
  }
  span.reference {
    position: fixed;
    left: 10px;
    bottom: 10px;
    font-size: 13px;
    font-weight: bold;
  }
  span.reference a {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    padding-right: 20px;
  }
  span.reference a:hover {
    color: #ddd;
    text-decoration: none;
  }
  .table {
    display: table;
    /* Allow the centering to work */
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="section" id="sectionAbout"&gt;
      &lt;div class="navbar"&gt;
        &lt;div class="table"&gt;
          &lt;ul class="nav"&gt;
            &lt;li&gt;ABOUT&lt;/li&gt;
            &lt;li&gt;&lt;a href="#sectionServices"&gt;SERVICES&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#sectionGWA"&gt;
                &lt;img src="images/yellow.png" class="img-circle"&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;BLOG&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#sectionContact"&gt;CONTACT&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="contents"&gt;
        &lt;h2&gt;ABOUT US&lt;/h2&gt;
        &lt;div class="table"&gt;
          &lt;p&gt;
            &lt;bold&gt;this&lt;/bold&gt;is some text
            &lt;br&gt;
            &lt;br&gt;this is some more text.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- The JavaScript --&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="css/jquery.easing.1.3.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>