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