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}