CSS实现元素垂直居中
对元素的垂直居中针对于单行元素和多行元素将分情况讨论。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
HTML结构：
<div class="container"> Hello World!!!</div>
CSS样式：
<style> .container{ height:100px; line-height:100px; background:#999; }</style>对于父元素高度不确定的文本、图片等的块级元素的竖直居中可以设置相同的上下内边距（padding值）即可实现居中，这个数值不必过大。
多行文本，图片，块级元素皆属于这种情况，对此的垂直居中主要有两种方法。
对要垂直居中的元素外插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
另需注意，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。
HTML结构：
<body> <table> <tbody> <tr> <td class="wrap"> <div> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div> </td> </tr> </tbody> </table></body>
CSS样式：
table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
HTML结构：
<div class="container"> <div> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div></div>
CSS样式：
<style> .container{ height:300px; background:#ccc; display:table-cell; vertical-align:middle; }</style>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
