title: How to align ul tag content in center
body: <p>I had been trying to align content of <code>#refer</code>'s <code>ul</code> content in the center of the screen using CSS.</p>
  
  <pre><code>&lt;div id="refer" style="border:1px solid red"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" class="circlelink"&gt;One&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="circlelink"&gt;Two&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="circlelink"&gt;Three&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  
  .circlelink {
      display:block;
      width:100px;
      height:100px;
      border-radius:50px;
      font-size:20px;
      color:#fff;
      line-height:100px;
      text-align:center;
      text-decoration:none;
      background:linear-gradient(to bottom, #719ECE, #719FCE);
  }
  
  .circlelink:hover {
      text-decoration:none;
      background:#719ECE;
      box-shadow: 0 0 8px rgba(0, 0, 0, .8);
      -webkit-transform: scale(1.05, 1.07);
      -moz-transform: scale(1.05, 1.07);
  }
  
  #refer {
      position:absolute;
      top:20%;
      width:100%;
      margin-left:auto;
      margin-right:auto;
  }
  
  #refer ul {
      clear:both;
      margin: 0;
      padding: 0;
  }
  
  #refer ul li {
      display:block;
      position: relative;
      float: left;
      height: auto;
      width: 200px;
      padding: 0;
      margin-left: 10px;
      list-style: none;
      text-align: center;
      white-space: nowrap;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ptMwH/" rel="nofollow">Fiddle</a></p>