超级居中 快速布局 => 拖拽水平垂直居中 没有flex布局的缺点
<!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>
.box{
/*
快速布局 => 水平垂直居中
将元素改为grid 设置place-items:center
相当于 align-items 和 justify-items
*/
display: grid;
place-items: center;
width: 500px;
height:200px;
border-radius: 10px;
background-color: rgb(164, 227, 229);
}
.parent {
width: 200px;
height:100px;
display: grid;
background-color: rgb(239, 188, 162);
}
</style>
</head>
<body>
<div class="box">
<div class="parent"></div>
<div class="parent"></div>
</div>
<script>
let box = document.querySelector('.box');
// 鼠标按下
box.onmousedown = function (e) {
// 鼠标移动
document.onmousemove = function (e) {
box.style.width = e.pageX + 'px';
box.style.height = e.pageY + 'px';
};
// 鼠标抬起
document.onmouseup = function () {
// 解绑mousemove事件
document.onmousemove = null;
};
};
</script>
</body>
</html>