当HTML结构如下所示：

同时，CSS这样写：

效果如下：

很明显，图片并没有水平居中。这是因为浮动元素脱离了普通文档流，margin：0 auto也就不起作用了。

解决方法很简单：

方法一：

在浮动元素外面再嵌套一层div，代码如下：

此时，浮动元素就可以水平居中了：

同样地，对于多个浮动元素，也可以用这种方法实现水平居中，效果如下：

方法二：

浮动元素水平居中-----宽度不固定的浮动元素

html代码

CSS样式

方法三：

浮动元素水平居中-----宽度固定的互动元素

html代码

css代码