在网站设计和网页布局中，图片的垂直居中是一个常见的需求。尽管现代浏览器对CSS的支持已经相当完善，但在早期的IE6浏览器中实现垂直居中却是一项挑战，因为IE6不支持某些CSS属性，例如`vertical-align`属性在非表格元素上的应用。不过，通过一些特殊的CSS技巧，我们可以实现兼容IE6的图片垂直居中效果。
需要理解的是在IE6中实现垂直居中的基本原理。一种常用的方法是使用inline-block布局。这种方法的原理在于将图片及其容器设置为`display: inline-block;`，这样图片就会像文本一样排列，然后通过设置图片的`vertical-align: middle;`属性来实现垂直居中。
在提供的代码示例中，我们有一个`div`元素，它被赋予了`imgBox`这个类名，并设置了一个固定的宽度和高度。其中`display: inline-block;`和`vertical-align: middle;`属性共同作用，使得其内部的图片能够垂直居中。此外，示例中还包含了一个`<i>`标签，该标签也设置了高度为100%，这一做法是为了确保`imgBox`容器有足够的高度，因为`inline-block`元素的高度是由内容决定的，如果内容不足以撑开容器的高度，图片将无法实现垂直居中。
更具体地，我们来分析这段CSS代码：
```css
.imgBox {
width: 100%;
height: 400px;
border: 1px solid red;
}
.imgBox img, .imgBox i {
display: inline-block;
vertical-align: middle;
}
.imgBox i {
height: 100%;
}
```
- `.imgBox`是包含图片的容器，设置为100%的宽度，固定高度400px，并用红色边框来标示容器的边界，以便于观察布局效果。
- `.imgBox img, .imgBox i`选择器针对`imgBox`内的`img`和`i`元素，将它们的`display`属性设置为`inline-block`。这使它们能够像文本一样排列，并且能够接受`vertical-align`属性。
- `vertical-align: middle;`属性使得`img`和`i`元素相对于其行内内容的中线进行对齐。
- `.imgBox i`选择器仅针对`i`标签，设置了`height: 100%;`。这是为了确保`imgBox`容器有足够的高度，因为`inline-block`元素的高度默认不会超过其内容的高度。如果没有这个`i`标签或者`height: 100%;`声明，图片的垂直居中就无法实现，因为容器无法被撑开到足够的高度。
对于不支持`inline-block`的IE6来说，上述方法的兼容性是通过一个`i`标签实现的。由于`i`标签在IE6中默认是行内元素，它就能与`img`元素在同一行内显示，而通过高度的设置又能撑开父元素的高度，因此能与`vertical-align`属性结合实现垂直居中。
以上就是通过CSS实现图片垂直居中并且兼容IE6的方法和原理。这种技术手段通常需要与HTML结构中的特定元素配合使用，且由于兼容性考虑，它在现代浏览器中可能已经不再必要，但在处理旧版浏览器时，了解并掌握这种方法仍然是非常有用的。
