我们知道单行文字垂直居中时只用让height=line-height即可,那么图片以及多行文字是如何垂直居中的呢？现以如下图片和代码为例，将我搜集得到的方法做一个总结说明：
html代码：
<div class="box">
<img src="images/baymax.jpg">
</div>css代码：
.box{
width: 500px;
height: 500px;
margin: 50px auto;
background: bisque;
text-align: center;
}可以看到现在浏览器显示是这样的，div在浏览器里是水平居中，图片相对div也是水平居中。那么下面就采取办法使其可以垂直居中，见证奇迹的时刻到啦~~~~
图1
一、position定位和margin（不兼容IE6/7）
html代码：
<!--给img标签再嵌套一个div-->
<div class="box">
<div class="imgbox">
<img src="images/baymax.jpg">
</div>
</div>css代码：
.box{
width: 500px;
height: 500px;
margin: 50px auto;
background: bisque;
position: relative;
}
.imgbox{
width: 300px;
height: 307px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}图2
可以看到div水平居中，img相对父元素垂直居中。但是固定了图片的宽高，且不兼容IE6/7。那么在不知道子元素高度的时候如何垂直居中呢？
二、display：table-cell（IE6/7不兼容）
display:table-cell的作用即是让标签元素以表格单元格的形式呈现，类似于td标签。多行文字可以套一个span标签，加display:inline-block;属性，其他相同。且display:table-cell与float：left或是position:absolute可能会发生冲突，所以尽量不要同时使用。但是display:table-cell元素对margin值无反应。所以会造成本例中div元素不再相对浏览器水平居中。如下所示：
.box{
width: 500px;
height: 500px;
margin: 50px auto;
background: bisque;
text-align: center;
/*添加一下两行代码，使图片垂直居中*/
vertical-align: middle;
display: table-cell;
}图3
可以发现，图片相对div垂直居中了，但是div的margin: 50px auto;却不起作用了。而且IE6/7也不兼容。
三、display:table-cell和针对IE6/7的position和margin（兼容IE6/7）
<!--给img标签再嵌套一个div-->
<div class="box">
<div class="imgbox">
<img src="images/baymax.jpg">
</div>
</div>css代码：
.box{
width: 500px;
height: 500px;
margin: 50px auto;
background: bisque;
}
.imgbox{
width: 500px;
height: 500px;
text-align: center;
overflow: hidden;
display: table-cell;
vertical-align: middle;
*line-height: 500px;
}
.imgbox img{
*position: relative;
_top: 50%;
_margin-top: expression(this.height/2*-1);
}图4
可以看到，div水平居中，img相对父元素垂直居中。且兼容IE6/7。所以，大功告成~~~
