注：无论是display:table方式还是display:inline-block方式，想要实现子元素水平或垂直或水平垂直都居中，一定不要忘记给父元素设置font-size:0消除默认间隙，不然会有误差。

 

1.图片或背景图与文字的对齐

　　

　　给图片和文字的父容器设置font-size:0,然后单独给文字设置字体大小，因为inline-block元素会产生水平和垂直方向的默认间隙，可以通过给父容器设置font-size:0消除默认间隙，然后将图片容器设置为inline-block元素，如果是插入图片img本身就是inline-block元素就不用设了，然后设置图片容器的垂直对齐方式为vertical-align: top。

    
      
    
           
       粥品香坊
      
      
    
           
       粥品香坊
      
      
    
           
       粥品香坊
      
 

2.元素水平垂直均居中（宽高已知）

　　

3.元素水平垂直均居中（宽高未知，图片）

　　

　　父容器设置text-align: center,line-height:容器高,font-size:0;img标签设置vertical-align: middle.注意这种情况是img标签外直接就是最外层的父容器，没有间接包裹一层，下面一种情况是img标签和父容器中间还有一层，这种要用display: table来实现了，而且千万不能忘了父容器要设置font-size:0，不然会有间隙误差，下面一种table方式也是如此 。

4.元素水平垂直居中（宽高未知，通用，diaplay:table）

　　

　　父元素设置display:table,text-align:center,font-size:0;子元素设置display:table-cell,vertical-align:middle,这种方式也可以实现多行文本垂直居中。该方式IE低版本无效，IE低版本下父元素设置line-height属性，子元素设置display:inline-block即可 。

5.元素水平垂直居中（宽高未知，css3）