使用绝对定位+负外边距让DIV层水平垂直居中页面

在网页设计中，布局调整是非常关键的一环，其中让层水平垂直居中更是常见需求。在HTML中，水平居中的实现相对简单，通过设定`margin: 0 auto;`即可完成。垂直居中的实现则需要更多的技巧。

一、轻松实现层水平居中

要让层水平居中，我们可以使用CSS的`margin: 0 auto;`属性。这一方法的关键在于设定好元素的宽度和高度。例如，对于具有`.className`的层，我们可以这样设置：

```css

.className {

width: 270px;

height: 150px;

margin: 0 auto;

}

```

通过这种方式，无论页面如何变化，层始终会在水平方向上居中。

二、巧妙实现层垂直居中

相较之下，让层垂直居中就需要一些技巧。我们可以使用绝对定位（`position: absolute;`）结合负外边距（`margin: -75px 0 0 -135px;`）来实现。关键代码如下：

```css

.className {

width: 270px;

height: 150px;

position: absolute;

left: 50%;

top: 50%;

margin: -75px 0 0 -135px;

}

```

这里的负外边距设置为元素宽高的一半，以确保元素在垂直方向上居中。值得注意的是，这种方法仅适用于已知元素大小的情况。如果元素大小未知或动态变化，可能需要其他方法来实现垂直居中。

三、适应窗体大小变化的布局调整

为了确保在窗体大小变化时层仍然能够保持居中，我们可以使用jQuery来处理。通过监听窗体的`resize`事件，当窗体大小变化时调整层的位置。关键代码如下：

```javascript

$(document).ready(function(){

$(window).resize(function(){

$('.className').css({

position:'absolute',

left: ($(window).width() - $('.className').outerWidth())/2,

top: ($(window).height() - $('.className').outerHeight())/2

});

}).resize(); // Trigger the resize event immediately after binding the event handler.

});

```

这段代码通过jQuery获取窗体的宽度和高度，然后计算并设置层的`left`和`top`属性，确保层始终在窗体中心。通过调用`resize()`方法立即触发一次`resize`事件，确保在文档加载时就能正确设置层的初始位置。