li不固定数量屏幕居中

 <div id="centeredmenu"、>
     <ul、>
       <li、>Tab one</li>
       <li、>Tab two</li>
       <li、>Tab three</li>
       <li、>Tab four</li>
     </ul、>
    </div>

#centeredmenu { float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; } 
#centeredmenu ul { clear:left; float:left; list-style:none; margin:0; padding:0;position:relative; left:50%; text-align:center; } 
#centeredmenu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; }
 #centeredmenu ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; }
 #centeredmenu ul li a:hover { background:#369; color:#fff; }
 #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover { color:#fff; background:#000; 

那么他的实现原理是什么呢，我觉得他的原理就是利用float后元素宽度是他里面内容宽度，还有position：relative，偏移量是以百分数是他父类width的一半。
贴图吧，清晰点