(1)利用transform居中，示例如下：
<!DOCTYPE html> <html> <head> <title>实现垂直居中</title> <meta charset="UTF-8"/> <style type="text/css"> *{ margin:0; padding:0; } .parent{ width:300px; height:300px; border:green solid 1px; } .child{ margin-top:50%; transform:translateY(-50%);/*结合margin-top:50%;使得该元素垂直居中*/ text-align:center;/*水平居中*/ } </style> </head> <body> <div class="parent"> <div class="child"> <p>I love imooc</p> <p>快来慕课吧</p> </div> </div> </body> </html>
原文：http://www.cnblogs.com/mujinxinian/p/5676722.html