div图片垂直居中 如何使div中图片垂直居中

在网页设计中，对于图片在容器中的垂直居中展示，特别是在不同浏览器中保持兼容性，是一个常见且重要的问题。淘宝UED招聘中的一道题目便触及了这一核心问题：如何在未知尺寸（但高宽均小于200px）的图片在200px的正方形容器中实现水平和垂直居中，仅通过纯CSS实现。这一问题的现实背景，反映了其在淘宝工作中的普遍性和重要性。

此问题的难点在于两个方面：一是垂直居中的实现，二是图片作为置换元素的特性所带来的挑战。针对这个问题，我们可以借助一种简洁的CSS解决方案。考虑到浏览器兼容性和图片的特性，我们可以采用如下代码：

对于包含图片的div容器，我们可以采用如下的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;

}

```

将上述代码应用于HTML中的div和img标签，即可实现图片的垂直居中。这种方法结构简洁，CSS代码易于理解，同时兼顾了主流浏览器和IE浏览器的兼容性。例如：

```html

```

为了确保代码的流畅运行，还需要注意一些细节处理。例如，对特殊字符的处理和对代码的适当修改等。通过调用`cambrian.render('body')`来渲染页面主体部分。这样的处理方式既保证了页面的美观，又提升了用户体验。