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

最新推荐文章于 2024-05-17 10:26:44 发布

火兰

最新推荐文章于 2024-05-17 10:26:44 发布

阅读量302

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_47443027/article/details/116023503

版权

<!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>

效果如下：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

火兰

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
transform: translateY(-50%) 实现元素垂直居中效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .center { height: 500px; background:#888; } .center p{ .
复制链接

扫一扫