方法一：利用display:inline-block掌握
这个方法比较大略，是将容器转成display:inline-block行内块级元素，然后就可以直接用text-align:center使其达到水平居中效果。HTML代码中须要一个div来包围这个导航菜单。
方法二：利用position:relative办理
position:relative定位方法来让元素水平居中，一样平常来说
方法三：利用display:table办理
HTML代码实例
<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;
}
方法四：利用display:inline-flex办理
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;
}
提示：浏览器兼容问题，目前这个代码不支持IE7及以下版本的IE浏览器。
实在这些方法很好的办理了网站导航菜单居中的问题，利用CSS编写有助于后期的修正，极大的方便了我们的操作和节省了宝贵的韶光。在往后的内容中，
原创文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2316.html
