标签： float:left

用过“float:left”的同学们都知道，它让元素浮动，非常好用、简单的让多个元素并排一行，缺点是让“margin: 0 auto”失效，这就没办法让元素居中了，真是让人头疼！

那么要怎么实现居中呢？说来也简单，只需要给元素加一个父元素，把它进行居中就行啦。代码如下：

<style type="text/css">
    .con {
        position: relative;
        float: left;
        left: 50%;
        background: lightblue;
    }
    .box {
        position: relative;
        float: left;
        left: -50%;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
    <div class="con">
        <div class="box"></div>  
    </div>

我们来看看演示效果：