LI标签在Ul中居中显示

<style>
*{margin:0;padding:0;}
ul,ul li{list-style:none;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;}
.first{background:#ccc;}
.first ul li{background:#ececec;width:100px;height:100px;margin:10px;float:left;}

.second{background:red;text-align:center;margin-top:10px;}
.second ul{}
.second ul,.second ul li{padding:20px;}
.second ul li{background:yellow;margin:5px;display:inline;}
.second ul li a{}
</style>
<div class="first">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div class="second">
<ul class="clear">
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
<li><a href=#>asdf</a></li>
</ul>
</div>

<div class="first" style="margin-top:10px;">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>