让浮动元素居中的几种方法

让浮动元素居中的几种方法

方法一：

给浮动元素外层包裹一个div,这个div和浮动元素宽度一致，然后对这个div设置margin: 0 auto;

-------html-------
<div class="container-layout">
    <div class="content clearfix">
        <div class="float-item">float-item</div>
    </div>
</div>

-------css--------
.clearfix{   // IE清除浮动
   *zoom: 1;
}
.clearfix::after {  // 清除浮动
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.float-item{
   border: 1px solid #000;
    width: 50px;
    height: 50px;
    float: left;
    width: 100px; 
    background-color: yellow;
}

.container-layout {
    border: 1px solid #000;
    width: 300px;
}

.content{
    width: 100px;  // 与浮动元素宽度一致
    margin: 0 auto;
}

结果：

方法二：

-------html-------
<div class="container-layout clearfix">
    <div class="content">
        <div class="float-item">float-item</div>
    </div>
</div>
-------css--------
// .clearfix样式同上
.container-layout {
    border: 1px solid #000;
    width: 300px;
}
.content{
	float: left;
    position: relative;
    left: 50%; // 相对父元素宽度的50%，也就是150px，父元素为container-layout
}
.float-item{
   position: relative;
   float: left;
   left: -50%; // 相对父元素宽度的50%,父元素为content
   border: 1px solid #000;
   background-color: yellow;
}

结果：

方法三：

-------html-------
<div class="container-layout clearfix">
    <div class="float-item">float-item</div>
</div>
-------css--------
// .clearfix样式同上
.container-layout {
   border: 1px solid #000;
   width: 300px;
}
.float-item{
   position: relative;
   float: left;
   width: 100px;
   height: 50px;
   left: 50%; // 相对父元素宽度的50%,父元素为container-layout
   margin-left: -50px;
   border: 1px solid #000;
   background-color: yellow;
}

结果：

第一、三方法的浮动元素需要有固定宽度，第二种方法不需要有固定宽度