liをfloatで横並べたものをセンタリングさせる方法

ページャなどでページ遷移する際のリンクって、
ulを使って、1、2、3･･･と数字が横並ぶことはよくありますね。

例えばコレとか。

floatで並んだリスト全体をセンタリングさせようと思っても、
リストを囲んだulの幅を指定せず、｢margin:0 auto;｣や｢text-align:center;｣など
行ってもセンタリングすることができません。
幅を指定すれば可能だが、必ずも横幅を設定したくないというケースも
あるかと思います。

以下の方法を行うことにより、幅を指定しなくてもセンタリングすることができます。

HTML

<div class="page">
	<ul>
		<li><a href="#">&#8249;</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">&#8250;</a></li>
	</ul>
</div>

CSS

div.page {
	background-color: #999999;
	overflow: hidden;
	width:500px;
	position: relative;
}
ul {
	position: relative;
  	left: 50%;
  	float: left;
}

ul > li {
	float: left;
	list-style: none;
	margin-right: 1em;
	position: relative;
	left: -50%;
}

と、こんな感じに横並びが増えても、常にセンタリングするようにしてくれます。
「position｣や「left」を使ってul全体をセンタリングするという手法でしょうか。

サンプルはこちら。

今のところ、上記の方法がコードが少ない分、シンプルでかつ簡単で実装できるので、
現時点では良い方法かと思いますが、他に良い方法があれば適宜追記していきたいと
思います。

参考：
http://liginc.co.jp/designer/archives/1637

追記

読者より、ul全体をdisplay:tableを使ってセンタリングする方法があるそうです。
詳細はコチラ