如何在javaScript中将矩形居中？使矩形的X和Y位置成为矩形的中心

// 获取矩形元素
const rectangle = document.getElementById('rectangle');

// 获取矩形元素的宽度和高度
const rectWidth = rectangle.offsetWidth;
const rectHeight = rectangle.offsetHeight;

// 计算居中所需的偏移量
const offsetX = rectWidth / 2;
const offsetY = rectHeight / 2;

// 使用CSS样式将矩形居中
rectangle.style.transform = `translate(-${offsetX}px, -${offsetY}px)`;

// 获取屏幕的宽度和高度
const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// 获取矩形元素的宽度和高度
const rectWidth = rectangle.offsetWidth;
const rectHeight = rectangle.offsetHeight;

// 计算矩形的X和Y位置使其居中
const rectX = (screenWidth - rectWidth) / 2;
const rectY = (screenHeight - rectHeight) / 2;

// 设置矩形的位置为居中坐标
rectangle.style.left = `${rectX}px`;
rectangle.style.top = `${rectY}px`;