（方法一）
css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。
html代码：
1 <body> 2 <table><tbody><tr><td class="wrap"> 3 <div> 4 <p>看我是否可以居中。</p> 5 <p>看我是否可以居中。</p> 6 <p>看我是否可以居中。</p> 7 <p>看我是否可以居中。</p> 8 <p>看我是否可以居中。</p> 9 </div> 10 </td></tr></tbody></table> 11 </body>
css代码：
1 table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以就不需要显式地设置了。
（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但IE6、7 并不支持这个样式。
html代码：
1 <div class="container"> 2 <div> 3 <p>看我是否可以居中。</p> 4 <p>看我是否可以居中。</p> 5 <p>看我是否可以居中。</p> 6 <p>看我是否可以居中。</p> 7 <p>看我是否可以居中。</p> 8 </div> 9 </div>
css代码：
1 <style> 2 .container{ 3 height:300px; 4 background:#ccc; 5 display:table-cell;/*IE8以上及Chrome、Firefox*/ 6 vertical-align:middle;/*IE8以上及Chrome、Firefox*/ 7 } 8 </style>
原文：http://www.cnblogs.com/breakdinner/p/4404984.html