DIV始终居中的js代码

要实现一个`DIV`元素始终在页面中居中（水平和垂直），你可以使用CSS而不是仅JavaScript，因为CSS更适合处理布局和样式。不过，如果你需要在某些条件下动态地改变这个样式（比如窗口大小改变时），你可以使用JavaScript来动态添加或修改CSS样式。

下面是一个结合了CSS和JavaScript的示例，其中CSS负责基本的居中样式，JavaScript用于确保在窗口大小改变时也能保持居中。

### HTML

<div id="centerDiv" style="width: 200px; height: 100px; background-color: lightblue;">我是居中的DIV</div>

### CSS

#centerDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 可选：确保整个页面有足够的空间 */
html, body {
  height: 100%;
  margin: 0;
}

### JavaScript（可选）

虽然在这个例子中JavaScript不是必需的（因为CSS已经足够），但如果你需要在某些事件（如窗口大小改变）上动态调整样式，可以这样做：

// 这段代码实际上在这个例子中不是必需的，因为CSS已经处理了居中

// 但如果你想在窗口大小改变时做一些额外的处理，可以这样做：
window.addEventListener('resize', function() {
  // 这里你可以添加任何需要的代码
  // 但对于本例来说，CSS已经处理了所有事情
});

注意：在实际应用中，你可能需要将CSS样式放入一个外部或内部`