在div中要让文字居中，只需要利用height和line-height相互配合即可实现文字垂直居中，但要让图片垂直居中，却很麻烦，要么通过高度宽度的精确计算，利用margin等属性进行位置安排，要么就看看本文的解决办法吧。
在table中，我们可以使用valign实现内部元素的垂直居中，但在div中却未提供完整的该属性。我们可以通过下面的方法来实现在div 中利用css使图片垂直居中：
.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;
}
我们看到，主要是利用了新的css规则中的vertical-align:middle; 同时使用display: table-cell;使div表格化。只不过在IE中不支持该属性，以至于需要一些辅助的方法。
<div class="box">
<img src="XXX" />
</div>
