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

未经允许,不得擅自改动和转载

ransform: translateY(-50%),向上移动自身高度的一半,结合top:50%,达到垂直居中的效果

<!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%) 实现元素垂直居中效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容