将两个不相关的UL水平对中

Question

是否可以将两个不相关的UL并排水平居中？

我有这段代码：

<div id="container">
    <ul id="list1">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
    <ul id="list2">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
</div>

我尝试过“左：50％”然后“正确：50％”CSS技巧但没有成功。

#container { position: relative; left: 50%; }
#container ul { float: left; position: relative; right: 50%; }

有什么想法吗？

Answer 1

可能是这样的吗？ text-align: center; + display: inline-block;：

#container {
    ...
    text-align: center;
}

#list1, #list2 {
    ...
    display: inline-block;
}

演示：http://jsfiddle.net/N6RUM/

Answer 2

您可以使用table和table-cell：

Fiddle

#list1 { position: relative;  width: 50%;  display: table-cell; background-color: green;}
#list2 { position: relative;  width: 50%;  display: table-cell; background-color: red;}
#container{
    display: table;
    width: 100%;
    text-align: center;
}

li{
    list-style-type: none;
}

Answer 3

还是喜欢这个？ Fiddle

#container { 
    position: relative; 
    left: 50%;
}
#container ul { 
    float: left; 
}