今天小编跟大家讲解下有关css实现的让图片垂直居中的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css实现的让图片垂直居中的方法 的相关资料，希望小伙伴们看了有所帮助。
下图是理想中的效果图 外部容器的宽度和高度是固定的 中间的图片宽度和高度未知 但是图片要始终要相对于外部的容器垂直居中。
但是实际中实现的效果并不是很完美 由于各浏览器的解析都各不相同 所以各浏览器都会有1px-3px的偏差。
方法一 (XHTML 1.0 transitional)：
该方法是将外部容器的显示模式设置成display:table img标签外部再嵌套一个span标签 并设置span的显示模式为display:table-cell 这样就可以很方便的使用vertical-align象表格元素那样对齐了 当然这只是在标准浏览器下 IE6/IE7还得使用定位。
HTML结构部分：
<div id="box"> <span><img src=http://xyrl.com/skin/7ke/image/nopic.gif alt=""></span></div>
CSS样式部分：
<style type="text/css">#box{width:500px;height:400px;display:table;text-align:center;border:1px solid #d3d3d3;background:#fff;}#box span{display:table-cell;vertical-align:middle;}#box img{border:1px solid #ccc;}</style><!--[if lte IE 7]><style type="text/css">#box{position:relative;overflow:hidden;}#box span{position:absolute;left:50%;top:50%;}#box img{position:relative;left:-50%;top:-50%;}</style><![endif]-->
方法二 (XHTML 1.0 transitional)：
方法二和方法一的实现的原理大同小异 结构也是相同的 方法一用的是条件注释 方法二就用的CSS Hack。
CSS样式部分：
<style type="text/css">#box{width:500px;height:400px;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box span{position:static;*position:absolute; top:50%; }#box img {position:static;*position:relative; top:-50%;left:-50%; border:1px solid #ccc;}</style>
该方法有个弊端 在标准浏览器下由于外部容器#box的显示模式为display:table-cell 所以导致#box无法使用margin属性 并且在IE8下设置边框也无效。
方法三 (XHTML 1.0 strict)：
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell IE6/IE7是利用在img标签的前面插入一对空标签的办法。
HTML结构部分：
<div id="box"><i></i><img src=http://xyrl.com/skin/7ke/image/nopic.gif alt=""></div>
CSS样式部分：
<style type="text/css">#box{width:500px;height:400px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box img{border:1px solid #ccc;}</style><!--[if IE]><style type="text/css">#box i { display:inline-block; height:100%; vertical-align:middle }#box img { vertical-align:middle }</style><![endif]-->
方法三也同样适用XHTML 1.0 transitional。以上方法都是收集于AIDI 暂时只对这3个方法比较满意 兼容性方面不错 使用起来的限制也比较小 还有些方法我也都一一测试过 效果都不理想 在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。
思考：很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中 也就是div来模拟table 如果CSS有一个属性来实现这种效果那该多好。如果你也有好的方法 欢迎你来分享。
原文：http://stylechen.com/img-middle.html
来源：爱蒂网
