大小不固定 文字图片居中

 1、透明图片+背景定位   background-position: center;

<img src="transparent.jpg" style="background-image:url(need.jpg);">
 

 

2、在IE下使用 font-size 使图片垂直居中显示，firefox,chrome等使用line-height 配合 img 的vertical-align

li {float:left; 150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}

li:after{ content:''; vertical-align:middle;}

li image{vertical-align:middle;}

 

3、display:inline-block 和文字大小控制居中

a{display:inline-block; 1.2em;  font-size:128px; border:1px solid blue; vertical-align:middle; text-align:center;}
img{vertical-align:middle; border:1px solid red;}

<a><img src="1.jpg" height="30" width="30"></a>

hack：如果外标签不是行内元素需添加  *display: inline; zoom:1; 转化成类似 inline-block

 

4、display:table-cell 

div {display:table-cell; 144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}

img{vertical-align:middle;}

<div><img src="1.jpg" width="30" height="30"></div>

 

5、要显示的图像后跟一个标签撑满容器，要显示的图片和该标签实现居中对齐

span{display:inline-block; height:100%; 0; vertical-align:middle; }
img{vertical-align:middle; }

<div><img src="1.jpg" height="30" width="30"><span></span></div>

 

6、该方法在IE8浏览器和Opera浏览器下是不垂直居中的

.zxx_ul_image li{float:left; 150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}

7 浮动标签配合负值margin（垂直居中）
<div id="floater"></div>
<div id="content">Content here</div>
#floater {float:left; height:50%; margin-bottom:-120px;}  这里负边距为内容高度
#content {clear:both; height:240px; position:relative;}

8 display:table + vertical-align:middle(垂直居中) 和上面的4类似

<div id="wrapper">
   <div id="cell">
      <div class="content">Content goes here</div>
   </div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}