超级居中 快速布局 => 拖拽水平垂直居中 没有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>
