div图片居中

很多人都知道，无论是图片还是文字，在div里面水平居中是很容易的，而垂直居中却比较困难。今天一个偶然的尝试，让我解决了这个问题。

这里涉及到两个属性，一个是line-height，另一个是vertical-align。在IE里面，只需要line-height就可以实现这个效果，不过要想在firefox和opea里面也实现这样的效果，必须用到vertical-align，而且这是属性一定要定义在image上面，而不是定义在div上。请看下面的代码：

IE中的代码：

div{
height:100px;
line-height:100px;
}
div img{
vertical-align:middle; /*optional*/
}

Firefox的代码：

div{
height:100px;
line-height:100px;
}
div img{
vertical-align:middle;
}

虽然这个问题解决了，但是我还是稍微有一点点不理解，为什么vertical-align必须定义在image上，而定义在div上不行。


调页面太恶心了。