利用translate实现盒子居中案例

fengjiao__66666

已于 2022-05-20 10:51:23 修改

阅读量210

点赞数 1

分类专栏： HTML作业文章标签： css html css3

于 2022-05-20 10:50:19 首次发布

本文链接：https://blog.csdn.net/fengjiao__66666/article/details/124878175

版权

HTML作业专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用translate实现盒子居中案例</title>
    <style>
        div{
            position:relative;
            width:500px;
            height:500px;
            background-color:pink;
        }
        p{
            position:absolute;
            left:50%;
            top:50%;
           
            width:200px;
            height:200px;
            background-color:purple;
             transform: translate(-50%,-50%); 
            /* margin-left:-100px;
            margin-top:-100px; */
        }
    </style>
</head>
<body>
    
</body>
<div>
    <p></p>
</div>

</html>

实现效果;