HTML中图片与文字的居中

前言：寒假已过，好长时间没有写自己的技术博客了，另外我现在开始学习前端技术，欢迎小伙伴一起来讨论交流。。。。

前端开发过程中有各种各样问题，只能遇到一个记录一个了。。。
我的代码如下。。。

Css代码

div{
width:100px;
height:100px;
border:1px solid black;
}

HTML代码

<div>
<img src="123.png">
<a>HEllo!!!</a>
</div>

如何解决有图片和文字的时候居中，自己搞了好久，
第一次用line-height=height这个垂直居中的作用，结果不行。。。
后来百度一下。。
原来是要添加一个vertical-align:middle就OK了，代码如下

Css代码

div  *{
vertical-align:middle;
}

这就完美解决了问题。。。。。