<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix { zoom:1; }
.wrap{
margin: 20px auto;
padding: 10px;
background: #FF2F2F;
overflow: hidden;
}
.content{
float: left;
position: relative;
left:50%;
}
ul{
position: relative;
left:-50%;
float: left;
}
ul li{
list-style: none;
float: left;
margin: 2px 5px;
}
ul li a{
display: block;
padding: 2px 5px;
background: #FFFFFF;
}
</style>
</head>
<body>
<div class="clearFix wrap">
<div class="content">
<ul>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</div>
</body>
</html>