.container{    float:left;
   position:relative;
   left:50%}
这里的50%是父级的50%，就的页面的50%。

.container ul{
   list-style:none;
   margin:0;
   padding:0;    
   position:relative;
   left:-50%;}
这里的50%也是父级的50%，就是ul的上级div的50%。因为div是块，所以他的宽跟页面一直，后退50%，又前进50%，那么这玩意不是又回去了啊！div加了float之后，它的宽就会坍缩至子元素（ul）的宽。向后退页面的50%，前进内容（ul）的50%，自然就居中了。

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

你可以回头看 浮动模型，这里只是运用了浮动模型。不是必须使用。