<!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. 生成跨语言的类型声明和接口绑定的工具（Djinni ）

    Djinni 是一个用来生成跨语言的类型声明和接口绑定的工具,主要用于 C++ 和 Java 以及 Objective-C 间的互通. 示例接口定义文件: # Multi-line comments ...

  2. POJ 2486 Apple Tree(树形DP)

    题目链接 树形DP很弱啊,开始看题,觉得貌似挺简单的,然后发现貌似还可以往回走...然后就不知道怎么做了... 看看了题解http://www.cnblogs.com/wuyiqi/archive/2 ...

  3. 基于nginx tomcat redis分布式web应用的session共享配置

    一.前言 nginx 作为目前最流行的开源反向代理HTTP Server,用于实现资源缓存.web server负载均衡等功能,由于其轻量级.高性能.高可靠等特点在互联网项目中有着非常普遍的应用,相关 ...

  4. OFFICE 修改记录保存在单元格批注中vba

    Dim ydtext As String '原单元格值 Private Sub Worksheet_Change(ByVal Target As Range) If Target.Cells.Coun ...

  5. JBPM4.4+SSH 整合配置及完整实例

    整合jBPM4.4+ssh过程(spring接管struts2和hibernate,例中都整合在application.xml中,没有单独的jbpm.hibernate.cfg.xml): 1.在se ...

  6. Add Customerlize Button in More Button List In Odoo

    There're two commen type of actions in odoo: ir.actions.server,ir.actions.client_multi 1.Using ir.ac ...

  7. the thread has exited with code -1073741819

    内存分配异常.无效或冲突.指针存在但指向无效内存区域.

  8. 使用javascript打开链接的多种方法

    在页面中的链接除了常规的方式以外,如果使用javascript,还有很多种方式,下面是一些使用javascript,打开链接的几种方式: 1.使用window的open方法打开链接,这里可是在制定页面 ...

  9. 2. Basic environment configuration

    网卡设置: Controller Node # The loopback network interface auto lo iface lo inet loopback   # The primar ...

  10. snowflake

    snowflake在分布式系统中生成全局id