html div>img img不能居中问题

line-height不能解决img在div内垂直居中，div 加入下面css代码，可以实现img垂直居中了

display: flex;
align-items: center;

文字和图片是兄弟关系不能垂直居中

<div style="height:100px">
    <span style="height:100%;display:inline-block;vertical-align:middle"></span>
    <img style="vertical-align:middle" src="images/star.png" >
</div>