【转】图片垂直居中的方法小结
近期做了个项目其中需要用到未知宽、高的图片水平且垂直居中的于div容器中。本来关于布局这事对我来说应该已经不是一个问题，但是蹩脚的ie6不支持图片垂直居中。下面讲一下我收集整理的一些方法。
要求：
图片垂直和水平居中于一个固定大小的容器内，a. 图片宽度、高度均不固定。图片可以通过程序控制将图片按一定比例缩放。b. 图片必须始终相对外容器垂直和水平居中。c. 兼容firefox、chrome、opera、safari、ie6/7/8及其他国内常见浏览器。
1.最简单的方法当然是背景图的方法。
将所需垂直和水平居中的图片设为背景图片，background:url(img/1.jpg) center center no-repeat;这适用于一些不需要点击的图片。
但是我们知道对于一些图片展示类网站（例如，百度图片、视频下载等）图片在这些地方往往是需要点击的，而且这些图片的更新频率也是非常高的。所以背景图的方法虽然简单却不常用。
2. 回归思想，用table布局，在table中支持图片居中。
呵呵，这种方法确实可用，但是看来看去总有一些不情愿，仿佛孙大圣一下被打回了原型似的。再者习惯了div布局,对table心里总有些许抵触的心里。
这样想着我在想是不是可以使用替换元素使图片垂直居中呢，在IE6下的结果使人大失所望。vertical-align属性适用于inline元素和table-cell，不适用于block元素。如果你想通过行高让图片在块元素内垂直居中在标准浏览器下是可以的，但是ie6下无效果，因为ie6中含有替换
元素的行高会失效。
3. hack技术。
我们知道在出去IE6/7以外的其他浏览器中图片是非常容易居中的。利用hack技术可以非常方便的使图片在ie6/7下垂直居中。
a. 定位法：
<style type="text/css">
.m_box{width:500px;height:600px;text-align:center;border:1px red solid;*position:relative;}
.m_box div{line-height:600px;vertical-align:middle;*position:absolute;*top:50%;*left:50%;}
.m_box img{vertical-align:middle;*position:relative;*top:-50%;*left:-50%;}
</style>
<div class="m_box">
<div href="###"><img src="images/m_1.jpg" /></div>
</div>
b. ie独有属性：
<style type="text/css">
.m_box{width:500px;height:220px;line-height:220px;border: 1px solid;text-align: center;}
.m_box img{vertical-align: middle;}
</style>
<!--[if IE 6]>
<style type="text/css">
.m_box span {border: 1px solid red;height: 100%;writing-mode: tb-rl;vertical-align: middle;}
</style>
<![endif]-->
<div class="m_box">
<span><img src="images/m_1.gif" alt=" " /></span>
</div>
4. 空标签法。使用ie支持文字垂直居中的方法，使图片垂直居中。注：此空标签必须是行属性标签。
例如：
<style>
#box {width:520px; height:444px;line-height:444px;border:1px solid #333;background:blue;text-align:center;}
span {display:inline-block;vertical-align:middle;height:100%;background:#f00;}
img {vertical-align:middle;}
</style>
<div id="box">
<a href="###">
<img src="images/m_1.jpg" alt="1" />
</a><span></span>
</div>
当然还有很多方法，积累中……
注：原有第三种方法hack技术的，b法原备注需要添加文字才可垂直居中；经再次验证发现是不必要添加文字即可垂直居中的。如果给各位朋友造成困惑请谅解！上文已更正。
