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

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創建一個包含子元素浮動的未知寬度的導航。