javascript: 元素水平居中垂直居中采用 margin 负值和 transform 的区别

最新推荐文章于 2024-05-06 18:26:11 发布

编程老菜鸡

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量371

点赞数 1

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/weixin_44868492/article/details/120118052

版权

①transform: translate(-50%, -50%)

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      background-color: pink;
      font-size: 18px;
      transform: translate(-50%, -50%);
      /* margin: -100px 0 0 -100px; */
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    let box = document.querySelector('.box');
    box.addEventListener('click', function (e) {
      console.log('e.pageX: ' + e.pageX);
      console.log('e.pageY: ' + e.pageY);
      console.log('offsetLeft: ' + this.offsetLeft);
      console.log('offsetTop: ' + this.offsetTop);
    })
  </script>
</body>

</html>

程序运行结果：
在这里插入图片描述
上面的输出结果可以得出：transform：translate(-50%, -50%);
是不会影响元素的offsetLeft 和 offsetTop的，即offsetLeft的值和offsetTop的值和没有使用transform移动时的值是相同的.

②margin: -100px 0 0 -100px;

程序运行的结果为：
在这里插入图片描述
margin: -100px 0 0 -100px; 对元素的影响是offsetLeft和offsetTop的值同步的改变

tranform: translate();改变元素的位置对offsetLeft 和offsetTop是不生效的
例如：

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      transform: translate(100px, 100px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    let box = document.querySelector('.box');
    console.log("box.offsetLeft = " + box.offsetLeft);
    console.log("box.offsetTop = " + box.offsetTop);
  </script>
</body>

</html>

在这里插入图片描述

编程老菜鸡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript: 元素水平居中垂直居中采用 margin 负值和 transform 的区别

<!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>Document&l
复制链接

扫一扫