<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .center {

             height: 500px;

             background:#888;

         }

         .center p{

             background: #fafafa;

             position: relative;

             top: 50%;

             transform: translateY(-50%);

         }

     </style>

 </head>

 <body>

     <div class="center">

         <p>

             1、委托代理业务通过客户端发单律师在线报价机制，律师将获得更多案源机会；

             2、客户在线向平台支付律师服务费，并由平台对律师费进行托管；

             3、服务完成或确认线下达成交易后，平台向律师所在律师事务所支付律师费；

             4、律师事务所与律师自行结算律师费。

         </p>

     </div>

 </body>

 </html>

效果如下：

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

transform: translateY(-50%) 实现元素垂直居中效果的更多相关文章

  1. 水平居中和transform: translateY(-50%) 实现元素垂直居中效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  3. CSS(3)多种方法实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  4. 黄聪：用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  5. 浮动元素垂直居中，bootstrap栅格布局垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css元素垂直居中的8中方法

    1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...

  7. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  8. 用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  9. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. BZOJ2819 Nim（DFS序）

    题目:单点修改.树链查询. 可以直接用树链剖分做.. 修改是O(QlogN),查询是O(QlogNlogN),Q=N=500000: 听说会超时.. 这题也可以用DFS序来做. 先不看修改,单单查询: ...

  2. BZOJ4230: 倒计时

    4230: 倒计时 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 20  Solved: 12[Submit][Status][Discuss] De ...

  3. java向图片上写字,两个图片合并的方法

    package writeimg; import javax.imageio.ImageIO; import java.awt.Color; import java.awt.Font; import ...

  4. IIS浏览提示无法显示网页的解决方法

    1.错误号401.1 症状:HTTP 错误 401.1 - 未经授权:访问由于凭据无效被拒绝. 分析: 由于用户匿名访问使用的账号(默认是IUSR_机器名)被禁用,或者没有权限访问计算机,将造成用户无 ...

  5. iOS学习—JSON数据解析

      关于在iOS平台上进行JSON解析,已经有很多第三方的开源项目,比如TouchJson,JSONKit,SBJon等,自从iOS5.0以后,苹果SDK推出了自带的JSON解决方案NSJSONSer ...

  6. 你能不用计算机来计算S=a+(a+1)+(a+2) + ...... + b的解的数目吗？

    S=a + (a + 1) + (a + 2) + ...... + b(其中a, b > 0) 现在我们要求,给定一个正整数S,求有多少种不同的<a,b>,使得上述的等式成立. 这 ...

  7. java中实现链表（转）

    分析: 上述节点具备如下特征: 1. 每个节点由两部分组成(存储信息的字段,存储指向下一个节点的指针) 2. 节点之间有着严格的先后顺序. 3. 单链表节点是一种非线性的结构,在内存中不连续分配空间. ...

  8. OS | 哲学家问题

    哲学家进餐问题: (1) 在什么情况下5 个哲学家全部吃不上饭?考虑两种实现的方式,如下:A.算法描述: void philosopher(int i) {/*i:哲学家编号,从0 到4*/ whil ...

  9. 《GK101任意波发生器》升级固件发布（版本：1.0.1build803）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.1.build803 编译日期:2014-08-06 ====================================== 二. ...

  10. 小组项目beta发布的评价

    这次最看好飞天小女警组,相比上次他们的界面漂亮了很多,功能也相对完善,他们的礼物挑选系统非常有创意.如果去网上爬更多的数据,这个项目会更完美. 新蜂团队的俄罗斯方块游戏新增加了显示下一个方块以及游戏积 ...