在网页设计中，让元素水平垂直居中是一个常见的需求，特别是在响应式布局中。传统的CSS方法，如使用`margin: 0 auto;`可以轻松实现水平居中，但垂直居中通常较为复杂。这里我们将详细探讨如何利用绝对定位和负外边距来实现一个DIV层在页面中的水平垂直居中，并考虑窗口大小变化时的动态调整。
让我们回顾一下基本的水平居中方法。当元素的宽度已知时，我们可以将其CSS样式设置为：
```css
.className {
width: 270px;
height: 150px;
margin: 0 auto;
}
```
这里的`margin: 0 auto;`使元素在父容器中水平居中，因为左右外边距自动平衡，而顶部和底部外边距为0。
然而，对于垂直居中，单纯的外边距无法达到预期效果。这时，我们可以通过绝对定位结合负外边距来解决。将元素的CSS样式修改为：
```css
.className {
width: 270px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -135px;
}
```
这里，`position: absolute;`使元素相对于最近的非静态定位祖先元素定位。`left: 50%; top: 50%;`将元素的左上角移动到其父元素的中心。然后，通过负外边距`margin-top`和`margin-left`，将元素自身的高度和宽度的一半移回，从而实现垂直和水平居中。负外边距值等于元素高度和宽度的一半，即`-height/2`和`-width/2`。
然而，当浏览器窗口大小发生变化时，这种静态设置的居中方式可能失效。为了确保元素在任何窗口尺寸下都能保持居中，我们需要使用JavaScript进行动态调整。使用jQuery，我们可以监听窗口的`resize`事件，并根据当前窗口大小重新计算元素的`left`和`top`值：
```javascript
$(document).ready(function() {
$(window).resize(function() {
$('.className').css({
position: 'absolute',
left: ($(window).width() - $('.className').outerWidth()) / 2,
top: ($(window).height() - $('.className').outerHeight()) / 2
});
});
// 触发一次resize事件，确保初始加载时元素居中
$(window).resize();
});
```
在这里，`$(window).resize()`函数会在窗口大小改变时执行，通过`outerWidth()`和`outerHeight()`获取元素的实际宽度和高度，然后计算出元素应该居中的位置。`$(window).resize();`在文档加载完成后立即调用，确保元素在页面加载时就处于居中状态。
总结来说，通过绝对定位和负外边距的组合，我们可以实现一个DIV层在页面中的水平垂直居中，同时配合JavaScript监听窗口大小变化，可以确保元素在任何屏幕尺寸下都能保持居中。这种方法虽然需要一些额外的CSS和JavaScript，但它提供了良好的兼容性和灵活性，适应于各种网页布局需求。
