CSS center div with unknown width

center.css

.container {
  clear: both;
  float: left;
  width: 100%;
  overflow: hidden;
}

#menu {
  padding: 0;
  list-style-type: none;
  /* centering menu */
  margin: 0 auto;
  float: left;
  position: relative;
  left: 50%;
}

#menu li {
  /* centering list elements */
  float: left;
  position: relative;
  right: 50%;
}

center.html

<div class="container">
  <ul id="menu">
    <li><a href="#">Elements</a></li>
    <li><a href="#">With different</a></li>
    <li><a href="#">Sizes</a></li>
  </ul>
</div>