當父元素和子元素都沒有定義寬度的情況下實現水平居中： 

display:inline-block
可以使用text-align:center和display:inline-block相結合，這個技巧需要一個父元素。 
HTML程式碼: 

複製程式碼 程式碼如下:
<div class="navbar"> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 

CSS程式碼: 

複製程式碼 程式碼如下:
.navbar { 
text-align:center; 
} 
.navbar ul { 
display:inline-block; 
} 
.navbar li { 
float:left; 
} 
.navbar li + li { 
margin-left:20px; 
} 

IE系列IE8+支援，要IE7 IE6 支援需要加入以下程式碼使display:inline像display:inline-block一樣 

複製程式碼 程式碼如下:
.navbar ul { 
*display:inline; 
*zoom:1; 
} 

position:relative
使用position:relative與float相結合的技巧及其浮動和定位參照物的關係，這個技巧需要兩個父元素，一個用來定位而另外一個用來避免出現滾動條。 
HTML程式碼: 

複製程式碼 程式碼如下:
<div class="navbar"> 
<div> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 
</div> 

CSS程式碼: 

複製程式碼 程式碼如下:
.navbar { 
overflow:hidden; 
} 
.navbar > div { 
position:relative; 
left:50%; 
float:left; 
} 
.navbar ul { 
position:relative; 
left:-50%; 
float:left; 
} 
.navbar li { 
float:left; 
} 
.navbar li + li { 
margin-left:20px; 
} 

IE7下需要加入下列程式碼支援： 

複製程式碼 程式碼如下:
.navbar { 
position:relative; 
} 

display:table
如果向使用極少的標籤實現，這個方法是個不錯的選擇。 
HTML程式碼: 

複製程式碼 程式碼如下:
<ul class="navbar"> 
<li><a href="/">Home</a></li> 
… 
</ul> 

CSS程式碼: 

複製程式碼 程式碼如下:
.navbar { 
display:table; 
margin:0 auto; 
} 
.navbar li { 
display:table-cell; 
} 
.navbar li + li { 
padding-left:20px; 
} 

不支援IE7及一下瀏覽器，其他的主流瀏覽器都支援。 

display:inline-flex
這個方法需要使用 flex-layout 的知識。 
HTML程式碼: 

複製程式碼 程式碼如下:
<div class="navbar"> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 

CSS程式碼: 

複製程式碼 程式碼如下:
.navbar { 
text-align:center; 
} 
.navbar > ul { 
display:-webkit-inline-box; 
display:-moz-inline-box; 
display:-ms-inline-flexbox; 
display:-webkit-inline-flex; 
display:inline-flex; 
} 
.navbar li + li { 
margin-left:20px; 
} 

使用CSS fit-content 值
下面看看如何用fit-content建立一個包含子元素浮動的未知寬度的導航。 
HTML程式碼: 

複製程式碼 程式碼如下:
<div class="navbar center"> 
<ul> 
<li><a href="/">Home</a></li> 
<li><a href="/">About us</a></li> 
<li><a href="/">Our products</a></li> 
<li><a href="/">Customer support</a></li> 
<li><a href="/">Contact</a></li> 
</ul> 
</div> 

CSS程式碼: 

複製程式碼 程式碼如下:
.center ul{ 
width: -moz-fit-content; 
width: -webkit-fit-content; 
width: fit-content; 
margin: auto; 
} 

瀏覽器支援度較低 只Chrome和Firefox這樣的-webkit- -moz-核心瀏覽器。當然以後慢慢會發展起來的。 
這個方式是推動瀏覽器發展的一個新的東西，目前供應於所以可以寫字首的瀏覽器，並沒有工作在IE9和IE9以下。 
根據你的需求來選擇合適的方法吧，display:inline-block相容性較好，flex-box將會用於未來。

演示