float:center居中浮动

我们都知道 float:left 和 float:right，但是否想过 float:center 呢？居中浮动...

.float-center{
    text-align:center;
    overflow:hidden;
}
.float-center ul{
    float:left;
    position:relative;
    left:50%;
}
.float-center li{
    position:relative;
    right:50%;
    float:left;
    margin:5px;
    padding:0 10px;
    border:2px solid #ffa500;
    line-height:2em;
    background:#fd537e;
    color:#fff;
}

此方法实质是不确定宽度的块级元素的水平居中的解决方法三的应用。

这里还有一个变通的方法 取消 float 属性后，再水平居中，实现视觉上的一致

外框加上 .center-box，子元素加上 .center-item，元素就可以自动根据父元素的宽度水平居中。

HTML：
<ul class="center-box clearfix">
    <li class="center-item">item1</li>
    <li class="center-item">item2</li>
    <li class="center-item">item3</li>
</ul>

CSS：
/*
  @名称: float center
  @用法：
    1. 外框加上 .center-box，子元素加上 .center-item，元素就可以自动根据父元素的宽度水平居中。
    2. 结构(例:3栏)：别忘记给每个栏加宽度(如上)
*/

.center-box{
    display:block;text-align:center;

    /* 解决间隙问题 */
    font-size:0;
}
.center-item{
    display:inline-block;*display:inline;*zoom:1;

    /* 解决不能水平对齐问题 */
    vertical-align:top;

    /* 解决间隙问题后遗症解决 */
    font-size:13px;
}

问题及注意事项：

此方法实质是不确定宽度的块级元素的水平居中的解决方法二的应用。