CSS教程：网页图片垂直居中的使用技巧

在淘宝UED招聘中，一道颇有挑战性的题目引起了广泛关注：“使用纯CSS实现未知尺寸的图片（但高宽都小于200px）在200px的正方形容器中水平和垂直居中。”题目的背后，是淘宝日常工作中的一个常见挑战——垂直居中。这不仅是对CSS技能的考验，更是对设计师解决问题能力的检验。

题目的难点在于两点：一是垂直居中；二是图片作为一个置换元素，具有其独特的特性。面对这一难题，开发者们需要运用巧妙的CSS技巧来实现目标。

在众多的解决方案中，狼蚁网站SEO优化提供了一种结构简洁、CSS实现相对容易的方法。这种方法主要通过以下CSS代码实现：

```css

.box {

/ 非IE的主流浏览器识别的垂直居中的方法 /

display: table-cell;

vertical-align: middle;

text-align: center;

/ 针对IE的Hack /

display: block;

font-size: 175px; /约为高度的0.873，2000.873 约为175/

font-family: Arial; /防止非utf-8引起的hack失效问题，如gbk编码/

width: 200px;

height: 200px;

border: 1px solid eee;

}

.box img {

/ 设置图片垂直居中 /

vertical-align: middle;

}

```

这种技术挑战不仅仅是对CSS技能的考验，更是对设计师解决问题能力的一次锻炼。在淘宝的设计工作中，类似的挑战屡见不鲜。通过不断学习和实践，设计师们能够不断提升自己的技能水平，为淘宝的设计创新贡献力量。