在网页设计中，让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一种流行的JavaScript库，提供了丰富的功能和简便的API。
我们来探讨CSS中的几种水平垂直居中方法：
1. **Flexbox布局**：这是现代浏览器支持的一种布局方式，可以轻松实现子元素的水平和垂直居中。设置父元素的`display`属性为`flex`，然后添加`align-items: center;`和`justify-content: center;`即可。
```css
.parent {
display: flex;
align-items: center;
justify-content: center;
}
```
2. **Grid布局**：对于更复杂的布局，CSS Grid也可以轻松实现居中。设置`display`为`grid`，并使用`place-items: center;`。
```css
.parent {
display: grid;
place-items: center;
}
```
3. **绝对定位**：对于固定尺寸的`div`，可以使用绝对定位。设置`position: absolute;`，然后将`top`、`bottom`、`left`和`right`都设为`50%`，再通过负边距`transform`调整位置。
```css
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
4. **使用calc()函数**：对于未知大小的`div`，可以使用`calc()`计算高度和宽度，然后配合`margin: auto;`。
```css
.parent {
position: relative;
}
.child {
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: auto;
}
```
描述中提到使用jQuery，这通常用于处理浏览器兼容性问题或动态调整元素位置。例如，当窗口大小改变时，可以通过监听`resize`事件来更新`div`的位置。
```javascript
$(window).resize(function() {
var parentHeight = $('.parent').height();
var parentWidth = $('.parent').width();
$('.child').css({
top: (parentHeight - $('.child').height()) / 2,
left: (parentWidth - $('.child').width()) / 2
});
});
```
这里，`jquery-1.7.1.js`是jQuery库的文件，它使得我们可以方便地操作DOM和处理事件。而`淡入淡出(居中).html`可能是包含上述代码的一个示例页面，展示了如何结合jQuery实现`div`的居中和淡入淡出效果。
实现`div`的水平垂直居中有多种方法，包括CSS的Flexbox、Grid、绝对定位等，以及JavaScript/jQuery的动态调整。选择哪种方法取决于项目需求和浏览器兼容性要求。在实际开发中，通常会结合使用这些技术来达到最佳效果。
DIV(居中).rar （2个子文件） 
jquery-1.7.1.js 242KB
淡入淡出(居中).html 2KB
