css图片垂直居中 css中如何实现图片垂直居中

在淘宝UED招聘的一道经典题目中，考察的是如何通过纯CSS技术将一张尺寸未知（但高度和宽度都小于200px）的图片在一个200px的正方形容器中实现水平和垂直居中。这个问题在淘宝的实际工作中具有极高的代表性，因为垂直居中是一个常见且具挑战性的布局问题。这个问题的难点主要体现在两个方面：一是如何实现垂直居中，二是需要处理图片这个特殊元素的特性。

面对这一挑战，我们可以借鉴狼蚁网站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;

}

```

对应的HTML代码为：

```html

```

这段CSS代码通过运用table-cell的display属性以及vertical-align属性实现了元素在容器中的垂直居中。针对IE浏览器进行了特定的样式调整，以确保兼容性。而针对图片元素，通过vertical-align属性确保了其在容器中的垂直居中。这种解决方案既简洁又实用，在实际项目中具有很高的应用价值。