图片水平垂直居中方案

在做图片展示的时候经常遇到图片大小不定，但是需要垂直水平居中的情况，而且需要没有图片的地方需要用背景色填充。
今天根据资料总结了一下实现图片水平垂直居中的方案。
实现结果：

方案一 通过line-height实现

css:

.line-height.img-panel{    height:90px;    line-height:88px;/*减去border宽度，如果为IE8再减去2px，原因还在研究*/    width:160px;    border:1px solid #cccccc;    text-align:center;    display:inline-block;    vertical-align: middle;    font-size:0px;}.line-height img{    max-width:100%;/*使图片宽度不超过边界*/    max-height:100%;/*使图片高度不超过边界*/    vertical-align: middle;/*垂直居中必须在img上增加此属性*/    display:inline-block;}

html:

<div class="line-height img-panel">    <img src="http://sandbox.runjs.cn/uploads/rs/21/tzyul8fr/middleCenter.1200.1.jpg"></div><div class="line-height img-panel">    <img src="http://sandbox.runjs.cn/uploads/rs/21/tzyul8fr/middleCenter.2341.8.jpg"></div>

方案二 通过table-cell设置图片垂直水平居中

此方式通过div模拟table的特性来使图片居中
css:

.table-cell.img-panel{    border:1px solid #cccccc;    text-align:center;    display:table;/*IE7不支持此属性*/    float:left;    margin-right:4px;    font-size:0px;    width:160px;    height:90px;    table-layout:fixed;/*为了使表格不被撑开*/}.table-cell span{    display:table-cell;/*IE7不支持此属性*/    vertical-align: middle;    width:160px;    height:90px;}.table-cell img{    max-width:100%;    max-height:100%;}

html:需要多套一层表示table-cell

<div class="table-cell img-panel">    <span><img src="http://sandbox.runjs.cn/uploads/rs/21/tzyul8fr/middleCenter.1200.1.jpg"></span></div><div class="table-cell img-panel">    <span><img src="http://sandbox.runjs.cn/uploads/rs/21/tzyul8fr/middleCenter.2341.8.jpg"></span></div>

方案三 IE7通过img前加span设置图片垂直水平居中

老版本浏览器对line-height支持不好的，需要在图片前边添加一个标签，将标签高度设置为100%，然后让图片和该标签基于中线对齐。
css:

.ie8-pre.img-panel{    height:90px;    line-height:88px;    width:160px;    border:1px solid #cccccc;    text-align:center;    display:inline-block;    margin-right:4px;    font-size:0px;}.ie8-pre span{    display:inline-block;    vertical-align: middle;    height:100%;    font-size:0px;}.ie8-pre img{    display:line-block;    vertical-align: middle;    max-width:100%;    max-height:100%;}

html:

<div class="ie8-pre img-panel">    <span></span><img src="http://sandbox.runjs.cn/uploads/rs/21/tzyul8fr/middleCenter.1200.1.jpg"></div><div class="ie8-pre img-panel">    <span></span><img src="http://sandbox.runjs.cn/uploads/rs/21/tzyul8fr/middleCenter.2341.8.jpg"></div>

demo实例

1、水平垂直居中demo