ul宽度不固定(或li数量不固定) 居中显示

ul宽度不固定
html：
<div id="box">
    <ul class="middle">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
    </ul>
</div>

css：
#box {
    position:relative;
    width:500px;
    background-color:#eee;
    overflow:hidden;
}
#box .middle {
    float:left;
    position:relative;
    left:50%;
    margin: 0;
    padding: 0;
}
#box .middle li{
    position:relative;
    right:50%;
    float:left;
    list-style-type: none;
    border:solid 1px #000;
    line-height:60px;
}

li数量不固定
html：
<ul id="middle">
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ul>

css：
#middle {
    text-align: center;
    background: #f00;
}
#middle li {
    display: inline-block;
    *display: inline;  /*ie 6 7 行内块hack*/
    *zoom: 1;  /*ie 6 7 行内块hack*/
    width: 50px;
    margin: 5px;
    line-height: 18px;
    font-size: 12px;
    background: #ff0;
}