CSS導航菜單水平居中的(Of)多種方法：
方法1：display:inline-block
方法2：position:relative
方法3：display:table
方法4：display:inline-flex
方法5：width:fit-content / width:intrinsic
方法1：display:inline-block
這(This)個(Indivual)方法比較簡單，是将容器轉成「display:inline-block」行内塊級元素，然後就可以(By)直接用(Use)「text-align:center」使其達到(Arrive)水平居中效果。
HTML代碼：
這(This)裏我(I)們需要(Want)一(One)個(Indivual)div來(Come)包圍這(This)個(Indivual)導航菜單。
首頁
…
CSS代碼：
給外面的(Of)div添加「text-align:center」，然後将菜單容器設成「display:inline-block」行内塊級元素，菜單浮左「float:left」
.navbar {
text-align:center;
}
.navbar ul {
display:inline-block;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}
這(This)裏浏覽器兼容隻能是IE8或更高版本，所以(By)如果要(Want)兼容IE7的(Of)話，請加入以(By)下代碼
.navbar ul {
display:inline;
zoom:1;
}
方法2：position:relative
這(This)是使用(Use)「position:relative」定位方法來(Come)讓元素水平居中，我(I)不(No)是很推薦這(This)方法，因爲(For)代碼多了個(Indivual)div去包住，當然這(This)些是根據情況來(Come)使用(Use)的(Of)。
HTML代碼：
首頁
…
CSS代碼：
将定位div設爲(For)浮動，再定位「left:50%」,然後導航定位至「left:-50%」，這(This)方法很有意思吧。可能表達不(No)是很清楚，自己看代碼吧^^
.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;
}
如果要(Want)兼容IE7，請添加以(By)下樣式：
.navbar {
position:relative;
}
方法3：display:table
如果你喜歡簡潔的(Of)代碼，哪麽這(This)個(Indivual)方法就非常适合你了。
HTML代碼：
Home
…
CSS代碼：
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
浏覽器兼容：這(This)方法代碼精簡，但不(No)支持IE7及以(By)下版本……
方法4：display:inline-flex
有關flex layout的(Of)知識自己查下吧>_<
HTML代碼：
Home
…
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;
}
浏覽器兼容：不(No)支持IE7及以(By)下版本的(Of)IE浏覽器。
方法5：width:fit-content
HTML代碼：
首頁
…
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;
}
