一个div宽度不固定的左右居中效果

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
 border:0;
 outline:0;
 margin:0;
 padding:0;
}

.PageNav{
  float:left;
  100%;
  padding:20px 0px;
}

.pagination {
  height: 36px;
  margin: 18px 0;
}
.pagination ul {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  margin-left: 0;
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background:#f8f8f8;
}
.pagination li {
  display: inline;
}
.pagination a {
  float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left- 0;
  color:#666;
  font-size:14px;
  font-family:"黑体";
}
.pagination a:hover,
.pagination .active a {
  background-color: #efefef;
}
.pagination .active a {
  color: #004ea2;
  cursor: default;
}
.pagination .disabled span,
.pagination .disabled a,
.pagination a:hover,
.pagination .disabled a:hover {
  color: #004ea2;
  background-color: transparent;
  cursor: default;
}
.pagination li:first-child a {
  border-left- 1px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
.pagination li:last-child a {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
.pagination-centered {
  text-align: center;
}

html:

<div class="PageNav">
     <div class="pagination pagination-centered">
      <ul>
     <li><a href="#">上一页</a></li>
     <li class="active">
       <a href="#">1</a>
     </li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">...</a></li>
     <li><a href="#">7</a></li>
     <li><a href="#">下一页</a></li>
      </ul>
    </div>
   </div>