css 图片垂直水平居中以及清除浮动方式（常用几种方式）

css图片垂直水平居中

一、利用line-height和height来垂直水平居中

Html代码：

<div class="box">
<img src="aa.png">
</div>

Css代码：

.box{
width: 300px;
height: 300px;
background: blue;
text-align: center;
line-height: 300px;
}
.box img{
vertical-align: middle;
}

二、利用table-cell来垂直水平居中（用这个属性来模拟table，存在兼容性，这种方法并不兼容IE6/IE7）

Html代码：

<div class="box">
<img src="aa.png">
</div>

css代码：

.box{
width: 300px;
height: 300px;
background: blue;
display: table-cell;
vertical-align: middle;
text-align: center;
}

三、利用span来进行水平垂直居中（找span做一个参照物）

Html代码：

<div class="box">
<img src="aa.png"><span></span>
</div>

css代码：

.box{
width: 300px;
height: 300px;
background: blue;
text-align: center;
}
.box span{
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}

四、利用绝对定位来设置（用margin减去图片宽高值的一半）

Html代码：

<div class="box">
<img src="aa.png">
</div>

Css代码：

.box{
position: relative;
width: 300px;
height: 300px;
background: blue;
}
.box img{
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin-left: -13px;
margin-top: -13px;
}

清除浮动的方式

一、浮动产生的主要原因：当标签里面的元素没有实际高度时会产生高度塌陷（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）这个时候，为了解决高度塌陷就要清除浮动

二、清除浮动的三种方式

1、给父元素添加声明 ：

overflow:hidden;

2、在浮动元素下方添加空div,并给该元素添加声明：

clear:both;
height:0;
overflow:hidden;

3、万能清除浮动法( after伪类)

选择符:after{
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}

为了兼容 IE6，7 我们要使用zoom来配合

选择符:after{
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}

选择符{zoom:1}