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>

效果如下:

修改文字內容后測試效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM