transform: translateY(-50%) 实现元素垂直居中效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .center { 8 height: 500px; 9 background:#888; 10 } 11 .center p{ 12 background: #fafafa; 13 position: relative; 14 top: 50%; 15 transform: translateY(-50%); 16 } 17 </style> 18 </head> 19 <body> 20 <div class="center"> 21 <p> 22 1、委托代理业务通过客户端发单律师在线报价机制，律师将获得更多案源机会； 23 2、客户在线向平台支付律师服务费，并由平台对律师费进行托管； 24 3、服务完成或确认线下达成交易后，平台向律师所在律师事务所支付律师费； 25 4、律师事务所与律师自行结算律师费。 26 </p> 27 </div> 28 </body> 29 </html>
效果如下：
修改文字内容后测试效果：
