CSS導(dǎo)航菜單水平居中的多種方法：

　　方法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è)方法比較簡(jiǎn)單，是將容器轉(zhuǎn)成「display:inline-block」行內(nèi)塊級(jí)元素，然后就可以直接用「text-align:center」使其達(dá)到水平居中效果。

　　HTML代碼：

　　這里我們需要一個(gè)div來(lái)包圍這個(gè)導(dǎo)航菜單。

　　首頁(yè)

　　…

　　CSS代碼：

　　給外面的div添加「text-align:center」，然后將菜單容器設(shè)成「display:inline-block」行內(nèi)塊級(jí)元素，菜單浮左「float:left」

　　.navbar {

　　text-align:center;

　　}

　　.navbar ul {

　　display:inline-block;

　　}

　　.navbar li {

　　float:left;

　　}

　　.navbar li + li {

　　margin-left:20px;

　　}

　　這里瀏覽器兼容只能是IE8或更高版本，所以如果要兼容IE7的話，請(qǐng)加入以下代碼

　　.navbar ul {

　　display:inline;

　　zoom:1;

　　}

　　方法2：position:relative

　　這是使用「position:relative」定位方法來(lái)讓元素水平居中，我不是很推薦這方法，因?yàn)榇a多了個(gè)div去包住，當(dāng)然這些是根據(jù)情況來(lái)使用的。

　　HTML代碼：

　　首頁(yè)

　　…

　　CSS代碼：

　　將定位div設(shè)為浮動(dòng)，再定位「left:50%」,然后導(dǎo)航定位至「left:-50%」，這方法很有意思吧。可能表達(dá)不是很清楚，自己看代碼吧^^

　　.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)?zhí)砑右韵聵邮剑?/p>

　　.navbar {

　　position:relative;

　　}

　　方法3：display:table

　　如果你喜歡簡(jiǎn)潔的代碼，哪么這個(gè)方法就非常適合你了。

　　HTML代碼：

　　Home

　　…

　　CSS代碼：

　　.navbar {

　　display:table;

　　margin:0 auto;

　　}

　　.navbar li {

　　display:table-cell;

　　}

　　.navbar li + li {

　　padding-left:20px;

　　}

　　瀏覽器兼容：這方法代碼精簡(jiǎn)，但不支持IE7及以下版本……

　　方法4：display:inline-flex

　　有關(guān)flex layout的知識(shí)自己查下吧>_<

　　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;

　　}

　　瀏覽器兼容：不支持IE7及以下版本的IE瀏覽器。

　　方法5：width:fit-content

　　HTML代碼：

　　首頁(yè)

　　…

　　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;

　　}