用translate让盒子居中

最新推荐文章于 2025-06-30 18:09:14 发布

LiuY-love-kexue

最新推荐文章于 2025-06-30 18:09:14 发布

阅读量374

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.csdn.net/google_SEO_yang/article/details/122519182

<style>
        div{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;           
        }
        p{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>       
</head>
<body>
    <div>
        <p></p>
    </div>
</body>