img标签在div里上下居中

方法一：图片尺寸未知，IE8-不支持

CSS部分：
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
position:relative;
}
</style>

DOM部分：
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif" style="margin-top:auto;margin-bottom:auto;top:0;bottom:0;position:absolute"/>
</div>

方法二：图片尺寸已知，正负margin抵消

CSS部分：
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
position:relative;
}
</style>

DOM结构：
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif" height=164 style="margin-top:-82px;top:50%;position:absolute"/>//margin-top:-imgheight/2
</div>

方法三：图片尺寸未知，table-cell属性，IE8-不支持

CSS部分
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
display:table-cell;
vertical-align:middle
}
</style>

DOM部分
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif"/>
</div>

方法四：图片大小未知，背景图片

CSS部分
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
background:url('http://static.cnblogs.com/images/adminlogo.gif') center no-repeat;
}
</style>

DOM部分
<div class="content">
</div>

方法五：利用IFC，创建一个IFC的环境，让行框的高度是包含块的高度的100%，让行框内部的元素使用vertical-align：middle，就可以实现垂直居中。因此，我们可以在行框中插入一个高度100%的inline-block元素，把整个行框撑高直到包含块的100%。见http://www.cnblogs.com/aaron-shu/p/4101198.html