transform:translate(-50%,-50%)与margin-top:-(width/2),margin-left:-(height/2)对比

最新推荐文章于 2023-03-13 16:30:44 发布

weixin_46032763

最新推荐文章于 2023-03-13 16:30:44 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/weixin_46032763/article/details/107923930

版权

要想使盒子相对于页面可视区域水平垂直居中两种方法对比：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: fixed;
            width: 400px;
            height: 600px;
            left: 50%;
            top: 50%;
            /* margin-left为盒子宽度的一半取负，margin-top为本盒子高度一半取负 以下两句可实现本盒子水平垂直居中，鼠标点击处即e.target（决定每一次的e.pageX,e.pageY）自动偏离拖拽落实处（即显示出来的鼠标光标）等价于盒子左上点偏离于盒子中心点，鼠标落实处不为触发拖拽的点击处，此种写法divv.offsetLeft是盒子左边缘距离dom文档左边缘的距离同理divv.offsetTop是盒子上边缘距离dom文档上边缘的距离（可正可负）但e.pageX恒大于divv.offsetLeft,e.pageY恒大于divv.offsetTop*/
            margin-left: -200px;
            margin-top: -300px;
            /* 以下写法触发拖拽鼠标落实处和点击处是一个点，e.pageX和上一写法一样都是点击处到dom文档左边缘的水平距离，e.pageY是点击处到dom文档上边缘的垂直距离 ，divv.offsetLeft是盒子中心点距离dom文档左边缘的水平距离，divv.offsetTop是盒子中心点距离dom文档上边缘的垂直距离，此种写法e.pageX可大于也可小于divv.offsetLeft同理e.pageY也可大于或小于divv.offsetTop*/
            /* transform: translate(-50%, -50%); */
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <p>呵呵呵呵呵呵</p>
    <div>
        你好
    </div>
    <script>
        var divv = document.querySelector('div');
        divv.addEventListener('mousedown', function(e) {
            var x = e.pageX - divv.offsetLeft;
            var y = e.pageY - divv.offsetTop;
            console.log(e.pageX + ' page ' + e.pageY);
            console.log(divv.offsetLeft + ' offset ' + divv.offsetTop);
            console.log(x + ' e.page-offset ' + y);
            document.addEventListener('mousemove', move);

            function move(e) {
                divv.style.left = e.pageX - x + 'px';
                divv.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            });
        });
    </script>
</body>

</html>

在这里插入图片描述
上图为不加p标签用transform方法

上图为不加p标签用margin-left=-(width/2),margin-top=-(height/2)方法

上图为加入p标签用margin-left=-(width/2),margin-top=-(height/2)写法

weixin_46032763

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
transform:translate(-50%,-50%)与margin-top:-(width/2),margin-left:-(height/2)对比

要想使盒子相对于页面可视区域水平垂直居中两种方法对比：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g
复制链接

扫一扫