大小不固定 文字图片居中

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; width: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; width: 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; width: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%; width: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; width: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;}