2D转换居中效果

最新推荐文章于 2023-10-10 15:56:39 发布

liying999

最新推荐文章于 2023-10-10 15:56:39 发布

阅读量71

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/liying999/article/details/124877087

版权

这个示例展示了如何使用CSS的position属性和transform的translate方法将一个内部元素在相对定位的父元素中水平垂直居中。通过设置父元素的相对定位以及子元素的绝对定位，并利用负的translate值进行偏移，可以实现精确的居中对齐。

摘要由CSDN通过智能技术生成

<!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>2D转换居中效果</title>
    <style>
        div{
            position:relative;
            width:500px;
            height:500px;
            background-color:rgb(3, 255, 36);
        }
        p{
            position:absolute;
            left:50%;
            top:50%;
           
            width:200px;
            height:200px;
            background-color:rgb(253, 7, 7);
             transform: translate(-50%,-50%); 
            /* margin-left:-100px;
            margin-top:-100px; */
        }
    </style>
</head>
<body>
    
</body>
<div>
    <p></p>
</div>

</html>

运行结果：