要想使盒子相对于页面可视区域水平垂直居中两种方法对比:
<!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)写法