首页 > 其他 > 详细

transform: translateY(-50%) 实现元素垂直居中效果

时间:2016-04-26 15:43:47      阅读:214      评论:0      收藏:0      [点我收藏+]
 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>

效果如下:

技术分享

修改文字内容后测试效果:

技术分享

 

transform: translateY(-50%) 实现元素垂直居中效果

原文:http://www.cnblogs.com/wx1993/p/5435254.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!