搜索了一下網上的答案，分為兩種：
1、可以在外層加一個div，外層的div采用margin居中，里層的div設置寬度為100%。
<html> <head> <title>居中的菜單</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none; } html{ height:100%; } body{ height:100%; } .warp{ width:960px; margin:15px auto; padding:5px 0; background:#333; } .menu{ float: left; width:100%; overflow:hidden; } .menu ul{ font: 12px/30px "Times New Roman", Times, serif; float:left; left:50%; margin:0 auto; position:relative; } .menu ul li{ float:left; position:relative; right:50%; margin-left:2px; } .menu ul li a{ display:block; padding:0 15px; text-decoration:none; color:#f30; background:#eee; } .menu ul li a:hover{ background:#08f; color:#fff; } .clearfix:after{ content: "."; display: block; height:0; clear:both; visibility:hidden; } .clearfix{ zoom:1; } </style> </head> <body> <div class="warp clearfix"> <div class="menu"> <ul> <li><a href="#">PHP</a></li> <li><a href="#">ASP.NET</a></li> <li><a href="#">JQUERY</a></li> <li><a href="#">AJAX</a></li> <li><a href="#">EXTJS</a></li> </ul> </div> </div> </body> </html>
2、設置當前div的寬度，然后設置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
width:500px;height:300px; float:left; margin-left:50%; p osition:relative; left:-250px; background-color:#CCC;
設置margin-left:50%;后浮動元素左邊正好位於文檔中間，設置塊相對定位position:relative;然后左移寬度的二分之一，即可實現元素居中。在這個實例中寬度500，left設置為-250px.