當HTML結構如下所示：

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

#container{
  width:400px;
  height:110px;
  border:1px solid black;
}
#container div{
  width:100px;
  height:100px;
  float:left;
  margin:0 auto;
}

很明顯，圖片並沒有水平居中。這是因為浮動元素脫離了普通文件流，margin：0 auto也就不起作用了。

解決方法很簡單：在浮動元素外面再巢狀一層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;
}
 

同樣地，對於多個浮動元素，也可以用這種方法實現水平居中，效果如下：

需要注意的是，浮動元素外層巢狀的div寬度應該設定為浮動元素的寬度之和，否則無法實現真正的水平居中。