浮动后的li元素居中实现方法

<div class="demo">
<ul>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
</ul>
</div>

{
margin: 0;
padding: 0;
}
body {
background: #000;
color: #FFF;
font: 12px/1.5 Tahoma,Arial;
}
.demo {
border: 1px solid #CCC;
line-height: 27px;/ 如果有上下边框，必须设置行高使上下边框显示出来，行高无论是继承的还是给定的，计算的结果必须不小于27px，这里27=15+5+5+1+1，至于字体12px大小，为什么FF查看盒子模型中高为15px，我也不懂，请高人指点迷津 /
margin: 5px auto;
overflow: hidden;
width: 1430px; / 给包含ul的盒子设置宽度为浏览器窗口的物理宽度（我显示器19寸，差不多1430px宽），发现li的内容仍然居中，说明无论是是否定宽,li转换成inline元素均可以使li内容居中 /
}
.demo ul {
text-align: center;
margin: 2px 0;/ 让外边框显示出来 /
}
.demo ul li {
border: 1px solid #555;
display: inline;
padding: 5px;
list-style: none;
margin: 10px;/ 转换成inline元素之后，发现上下外边距失效（其实是内陷，可以使用行高调整），这个务必了解 /
}
a {
color: #FFF;
text-decoration: none;
}
a:link, a:visited {}
a:hover {
color: #F60;
}

.demo ul {
float: left;
text-align: center;
margin-left: 500px;/ 用margin或者对.demo用padding实现居中，非常的不灵活，如果li个数增加，边距必须再调整。目前我还没有找到能替代的方法，望大虾们指点^_^ /
}
.demo ul li {
border: 1px solid #555;
float: left;
padding: 5px;
list-style: none;
margin: 10px;
}

.demo {
border: 1px solid #CCC;
margin: 5px auto;
overflow: hidden;
width: 1430px;/ 给包含ul的盒子设置宽度为浏览器窗口的物理宽度，发现li的内容仍然居中，说明无论是是否定宽，相对定位法均可以使float元素居中 /
}
.demo ul {
float: left;
position: relative;
left: 50%;
}
.demo ul li {
border: 1px solid #555;
float: left;
position: relative;/ 只能用相对不能用绝对 /
padding: 5px;
left: -50%;/ 或者right: 50%; /
list-style: none;
margin: 10px;
}