floatで並べたリストのセンタリング

サイトのフッターなどで、リストをfloatで横並びしてメニューを表示したりしますが、このリスト全体のセンタリングがうまくできず困ってました。
確かリストの要素をインラインにして・・というのもありましたが、今回は不思議な方法を使ってみました。

(X)HTMLコード

<div id="menu">
   <ul>
   <li>メニュー1</li>
   <li>メニュー2</li>
   <li>メニュー3</li>
   <li>メニュー4</li>
   <li>メニュー5</li>
   </ul>
</div>

CSSコード

div#menu {
   position:relative;
   overflow:hidden;
}

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

div#menu li {
   position:relative;
   left:-50%;
   float:left;
}

どーしてそうなるのか、いまいちよく分かってないのですが(^^;
ちなみに参照させていただいたサイトはコチラです。
http://www.coolwebwindow.com/csstips/csstechnic/000241.php