浮动元素居中的三种方法

浮动场景：

<div>
  <div class="left">left</div>
</div>

#container{
   width:400px;
   height:110px;
   border:1px solid black;
}


#container div{
   width: 100px; 
   height:100px;
   float:left;
   margin:o auto;
   background-color: red;
}

运行代码效果：

方法一：

在浮动元素外面再嵌套一层div，嵌套的div的宽度设置为和浮动元素宽度相同，代码如下：

<div id="container">
    <div class="content">
       <div class="left" >left</div>
    </div>
</div>

 #container{
     width: 400px;
     height: 110px;
     border: 1px solid black;
 }
 .content{
     width: 100px;
     margin: 0 auto;
  }
  .content div {
     width: 100px;
     height: 100px;
     float: left;
     background-color: red;
   }

运行效果：

方法二：

定位+浮动    利用元素溢出解决浮动居中问题

<div class="content">
	<div class="left">left</div>
</div>     



.left{
      float: left;
      background-color: red;
      position: relative;
      left: -50%;
 }
 .content{
       float: left;
       position: relative;
       left: 50%;
 }       

方法三：

定位 + 浮动 + margin

• 不需要在浮动元素外面再次设置元素
• 需要设置宽度

.left{
          float: left;
          width: 100px;
          background-color: yellow;
          position: relative;
          left: 50%;
          margin-left: -50px;
 }
            
            
            
<div class="left">left</div>

总结

第一种和第三种方法都需要设置宽度，第二种方法不需要设置宽度