在Web前端开发中，实现图片在容器中垂直居中是常见的布局需求，尤其是在图片尺寸未知或动态变化时。本知识点将详细讲解如何使用纯CSS技术来实现一个图片在其父容器中水平和垂直居中，特别是在给定的尺寸约束条件下。
### 关键知识点
1. **CSS垂直居中技术**：在CSS中实现垂直居中有多种方法，常见的包括使用`display: table-cell`配合`vertical-align: middle`属性、使用绝对定位(`position: absolute`)结合`transform`属性等。
2. **图片作为置换元素的特性**：图片(`<img>`)是HTML中的置换元素，这意味着它具有类似文本的特性，可以在行内水平排列。但是由于图片高度和宽度通常由其图片文件决定，并且可能未知，这增加了垂直居中的复杂性。
3. **IE浏览器兼容性处理**：为了兼容旧版IE浏览器（如IE6-IE8），往往需要使用特定的CSS Hack技术。在这里，通过使用带星号的CSS规则来为IE浏览器提供不同的样式指令。
4. **使用相对结构的CSS方法**：使用相对简单的CSS结构，不仅代码更为清晰，而且易于理解和维护。在本例中，使用`.box`类作为容器，通过设置其为`table-cell`和`vertical-align: middle`来实现垂直居中。
### 技术实现
- **容器的设置**：我们定义`.box`类作为图片的容器。为了使该容器成为表格单元格(`table-cell`)布局，我们设置了`display: table-cell`属性，并通过`vertical-align: middle`来实现垂直居中。另外，通过设置`text-align: center`实现了水平居中。
- **兼容性处理**：为了兼容旧版IE浏览器，使用了`*display: block;`和`*font-size: 175px;`这样的星号选择器。由于IE浏览器对`table-cell`和`vertical-align`支持不完全，通过将`.box`设置为`block`级元素，并利用字体大小属性调整来近似实现垂直居中的效果。
- **图片的垂直居中**：为`.boximg`类设置`vertical-align: middle;`，这是为了确保图片在其容器`.box`中垂直居中。
### 具体代码实现
```css
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
*display: block;
*font-size: 175px; /* 约为高度的0.873 */
*font-family: Arial; /* 防止编码问题导致的hack失效 */
width: 200px;
height: 200px;
border: 1px solid #eee;
}
.boximg {
vertical-align: middle;
}
```
```html
<div class="box">
<img src="images/borderimages.png">
</div>
```
### 注意事项
- **图片尺寸限制**：题目要求图片尺寸小于200px，但未限制图片的最小尺寸，因此该方法适用于尺寸可控的图片。
- **CSS兼容性**：上述方法在现代浏览器以及IE6以上版本的浏览器中表现良好，但对于更老旧的浏览器，可能需要额外的兼容性处理。
- **容器尺寸**：容器被设置为200px的固定尺寸，因此这种方法适用于固定尺寸的容器。如果需要适应不同尺寸的容器，可能需要使用不同的CSS布局技术。
通过以上方法和注意事项的说明，可以确保图片在不同浏览器中实现垂直和水平居中的效果，并且对不同尺寸的容器做出相应的布局调整。这不仅是淘宝UED招聘题目中考察的要点，也是实际项目中常见的布局难题，因此掌握这些知识点对于前端开发者来说至关重要。
