.clearfix:after{
    content:'';
    visibility:hidden;
    font-size:0;
    height:0;
    display:block;
    clear:both;
}

.container{
    width:100%;
    text-align:center;          
}
 
ul{
    display:inline-block;  
}
 
li{
     float:left;
     width:20px;
     height:20px;
     margin:0 20px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     cursor:pointer;
}
 
a{
    display:block;
    background-color:#000;
}

实现思想是，先让ul定义 display:inline-block 属性，让其变成行内块级元素。 当ul成为行内块级元素后，它便有了行级元素的特性。 那么，重点来了。 只需要对ul的父级元素定义一个text-align:center; 效果便可以很明显的看到了。 更重点是，ul内的li的增减并不会对其位置造成偏移。