问题：假设外部div高度宽度已知，为200px，div内部图片大小未知，如何实现图片的水平和垂直居中？
水平居中很简单，text-align:center即可解决，垂直居中就有些麻烦了，主要是由于ie6,7的存在。
大家知道，在表格布局中，有个属性vertical-align:middle，那我们尝试用这个属性吧
.box{
width:200px;
height:200px;
border:1px solid #000;
text-align:center;
vertical-align:middle，
}
神马！木有用……
让我们仔细看下对这个属性的定义：
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
明白了吧，关键词：行内元素 单元格
第一种用法：行内元素
假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
怎样利用这个特性呢？如下图
于是代码可以这样写：
.box{
width:200px;
height:200px;
text-align:center;
border:1px solid #000;
}
span{
display:inline-block;
height:100%;
vertical-align:middle;
}
.box img{
vertical-align:middle;
}
YES！ie6,7下同样有效！
第二种用法：单元格
把外部div设置成 display:table-cell; 然后利用单元格的垂直居中
代码如下：
.box {
display: table-cell;
vertical-align:middle;
text-align:center;
width:200px;
height:200px;
border: 1px solid #eee;
}
bingo！Chrome下木有问题，但素ie6,7悲剧鸟~他们不支持该属性…..肿么办，只有针对他们单独hack了
下面是从怿飞的blog上发现的方法：
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
关于这个font-size，确实很神奇，不过这种方法实现的垂直居中并不是那么精确，但避免了额外的无用标签，不失为一个好方法
参考文献：
http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html
http://www.planabc.net/2008/05/26/img_vertical_center_solution/