为什么我的图像不能<div>通过我的CSS代码垂直居中显示？

Question

请参阅jsFiddle上的代码：http://jsfiddle.net/dpMss

HTML代码：

<div>
    <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="276" height="110" alt="Google China">
</div>​

CSS代码：

div {
    height: 118px;
    line-height: 118px;
    background: red;
}
img {
    vertical-align: middle;
}​

1、为什么我的图片不能垂直居中显示？

2、如何通过line-height和vertical-align的CSS属性使我的图像显示在垂直中心？

谢谢！

Answer 1

试试这个：

div {
  height: 300px;
  background: red;
}
div img {
  position:relative;
  top:50%;
  margin-top:-55px;
}

-55像素将图片与实际中心对齐，这是图像高度的一半。它适用于Chrome和Firefox。http://jsfiddle.net/b24UH/

Answer 2

这样写：

div {
    height: 200px;
    line-height: 118px;
    background: red;
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
img {
    vertical-align: middle;
}

更新

这样写：

div {
    height: 200px;
    line-height: 200px;
    background: red;
    vertical-align: middle;
    width:100%;
}
img {
    vertical-align: middle;
}

http://jsfiddle.net/dpMss/10/

它适用于所有浏览器

---