h5中css不给固定宽度而使得文本内容居中的效果

.mypages{
width:80%;
height:30px;
margin:20px auto;
background-color:pink;
position:relative;
}
/*主要内容给行内块元素*/
.mypages ul{
width:auto;
display:inline-block;
position: absolute;
left:50%;
top:5px;
transform: translate(-50%,0);
}
.mypages ul li{
float:left;
padding:0 5px;		
}

	<div class="mypages">
		<ul>
		    <li>首页</li>
		    <li>上一页</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>下一页</li>
			<li>末页</li>
		</ul>
	</div>