center two unrelated ULs horizontally

Question

Is it possible to center two unrelated ULs side by side horizontally?

I have this code:

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

I've tried the "left: 50%" and then "right: 50%" CSS trick with no success.

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

Any ideas?

Answer 1

Probably something like this? text-align: center; + display: inline-block;:

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

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

Demo: http://jsfiddle.net/N6RUM/

Answer 2

You can use table and 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

Or like this one ? Fiddle

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