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