【转载】浮动元素居中的几种方法
无意间看到一个讨论float元素如何自适应居中的话题，大概写法如下
.three{
display:block;text-align:center;
/* 解决间隙问题 */
font-size:0;
}
.three li{
width:100px;height:100px;
display:inline-block;*display:inline;*zoom:1;
/* 解决不能水平对齐问题 */
vertical-align:top;
/* 解决间隙问题后遗症解决 */
font-size:13px;
}
/* 让 chrome 支持 12px 以下的字体 */
@media screen and (-webkit-min-device-pixel-ratio:0){
.three{-webkit-text-size-adjust:none;font-size:1px;}
}
<ul class='three'>
<li>aaaa</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
</ul>
看到了一堆的解决bug的补丁。各种hack，如此写下来甚至在chrome下无法完美兼容，总有一像素的间距。
有网友也提出了如下写法：
<ul class='two'>
<li>aaaa</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
</ul>
.two{float:left;position:relative;left:50%;border-color:blue;}
.two li{width:100px;height:100px;float:left;position:relative;left:-50%;}
形身分离的写法，看到的和实际元素占得位置是不一样的。如果需要给ul设置背景就一切都露馅了~~
以上都是针对父子标签的双层嵌套而言，总显得不够完美。如果我们退而求其次，使用三层嵌套，css代码就和谐的多了。如下：
<body>
<ul class='one'>
<li>aaaa</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
</ul>
</body>
body{text-align:center;}
.one{display:inline-block;*display:inline;*zoom:1;}
.one li{width:100px;height:100px;float:left;}
我简单的修改了下代码，简洁很多，也只用到了一个hack。其实是第一种的原型，只是第一种为了解决双层嵌套下的一些bug，浪费了太多的css，还显得不够兼容，所以有时候权衡一下，倒是多层嵌套划算。
第二种在不对ul级别标签设置可视样式的情况下是最优写法。如果需要对ul设置背可视样式，则用第三种
