Im Normalfall, dehnt sich die Breite einer Liste über die gesamte zu Verfügung stehende Breite des Elternelement bzw. des Containers (z.B. DIV) in dem sie liegt.

Wenn man die Liste innerhalb des Containers zentrieren möchte, dann gibt man Ihr eine feste Breite und zentriert Sie dann mit Hilfe von margin:0 auto; aber was macht man, wenn die Liste keine feste Breite haben darf, da die Breite der Listen punkte sich verändern könnten oder ein neuer Punkt hinzugefügt wird der breiter ist als die voreingestellte Breitenangabe der Liste?

In dem Fall, können wir mit float arbeiten.

#container {clear:both;}
#menu {float: left; left: 50%; position: relative;}
#menu li {float: left; right: 50%; position: relative;}

<div id="container">
 <ul id="menu">
	  <li><a href="#">Punkt 1</a></li>
	  <li><a href="#">Punkt 2</a></li>
	  <li><a href="#">Punkt 3</a></li>
	  <li><a href="#">Punkt 4</a></li>
 </ul>
</div>

Das Elternelement bekommt clear:both; damit unser Layout trotz des float nicht zerschießt, die Liste bekommt float und eine Positionierung von 50% von links sowie position:relative; die Listen punkte selbst bekommen ebenfalls ein float und eine Positionierung von 50% und diesmal von rechts in Prozent, allerdings und wieder ein position:relative; die Liste gibt die Ausrichtung von links an und die Listen punkte die Ausrichtung von Rechts, die jeweils 50% betragen und unsere Liste damit mittig zentrieren.