搜索了一下网上的答案，分为两种：
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是宽度的一半。
500px;height:300px; float:left; margin-left:50%; p osition:relative; left:-250px; background-color:#CCC;
设置margin-left:50%;后浮动元素左边正好位于文档中间，设置块相对定位position:relative;然后左移宽度的二分之一，即可实现元素居中。在这个实例中宽度500，left设置为-250px.