第一种：
利用 display:table 和 display:table-cell 的方式
这种方式就好像将table布局搬过来一样，相信大家对table的td还是有印象的，它的内容是可以设置垂直居中的.
DEMO:
<style> .table{ display:table; } .table-cell{ display:table-cell; } .othercss{ background-color:#676; width:300px; height:300px; vertical-align: middle; text-align:center; } .child{ background-color:#444; width:150px; height:150px; } </style> <div class="table"> <div class="table-cell othercss"> <img src="" class="child" alt="" /> </div> </div>
第二种方式：利用css3 display:box
弹性盒子模型,css3的特别样式，觉得挺好用的，可以用来做父元素的平分布局或者比例布局，当然还可以用来实现垂直居中，当前演示的就是用来做垂直居中的应用方式。
DEMO:
<style> .img{ width:100px; height:100px; background-color:red; } .wrap{ width:280px;height:280px; background-color:#b1b1b1; display:box; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /*Other*/ display:box; box-pack:center; box-align:center; } </style> <div class="wrap"> <img src="" alt="" class="img" /> </div>
当然还有其他方式，比如利用绝对定位来达到垂直居中的效果,还有其他等等就不一一列举了.
原文：http://www.cnblogs.com/pigy/p/5591400.html