单行文本垂直居中就是用line-height:框高;
多行文本不固定高度垂直居中直接加一个padding就可以
多行文本固定高度看下面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .mulit_line{ height: 150px; /* 其实高度并没有发挥作用，框的高度其实是由行高撑开的， */ line-height:150px; border:1px dashed #cccccc; text-align: center; /*padding-left:5px;*/ } .mulit_line span{ display:inline-block; line-height:1.4em; vertical-align:middle; } </style> </head> <body> <p class="mulit_line"> <span style="font-size:12px;"> 原来一生一世那么短暂，原来当你发现所爱的，就应该不顾一切的去追求。<br> 因为生命随时都会终止，命运是大海，当你能够畅游时，你就要尽情游向你的所爱，<br> 因为你不知道狂流什么时候会到来，卷走一切希望与梦想。 </span> </p> </body> </html>