看代码先。

.container{    float:left;
   position:relative;
   left:50%}

.container ul{
   list-style:none;
   margin:0;
   padding:0;    
   position:relative;
   left:-50%;}
.container li{float:left;display:inline;margin-right:8px;}

先设置div向右浮动50%，这个50是指浏览器窗口的一般，原来div是在左上角的，现在来到浏览器窗口一半的位置。现在我们再来看ul的属性设置，外边距margin和内填充padding都为0，也就是说ul这个容器的是和div等宽的，而且因为内填充也是0，因此li也和ul等宽！还有一个重要的点，就是li被设置成了行内元素，所以123会在一行显示，而且整个容器的宽度就是123所占的宽度，也就是说div的宽度也是一样宽，然后这里继续看ul的属性设置，left：-50%，这里的相对定位是相对div的左边框来说的，这个时候ul带着li里面的123向左移动-50%，因为ul和div的宽度一样，所以这就实现了123居中的效果！

其实我后来懂了的

这么说，第一次右移动是以页面的左边框为判定位置，而第二次左移动是以现在移动的盒模型的左侧边为判定位置，这样移动后，刚好盒模型的中间在它原本的左侧边位置，这么说能理解吗？