学完最后一节课这才搞懂这里....原来很疑惑div是块级元素宽度默认是body的宽度，ul也是块级元素，宽度和div一样，li左浮动后应该贴着ul左边框，那么不是li要和body刚好一样宽才能居中吗？

      最后一节告诉我们display:none除外的任何元素设置float:left之后会变为内联块状元素，而例子中li设置了float:left，ul设置了margin:0;padding:0;div也设置float:left，那么div,ul和的宽度都是li的内容宽度加上margin-right。

     我试验了一下left:50%的这个50%应该是父元素宽度的50%，那么设置position:relative;left:50%;之后div的左边框移动向右到浏览器正中间，对ul设置position:relative;left:-50%;之后ul向左移动div宽度的一半。因为div和ul宽度一样，所以现在ul垂直方向上的面积平分线和div的左边框也就是浏览器垂直方向上的面积平分线重合了，li也就居中了。

你添加个

    ul{

      margin:0;

      padding:0；

     }

就好了