图片文字水平垂直居中（display:flex）

需要实现效果

html    

<div style="display:flex;display:flex;align-items:center;" >
    <div><img th:src="@{/images/man.jpg}" class="img-circle"></div>
    <div>
        <h1>乐闻x</h1>
        <hr/>
        <h5>放弃不难，但坚持一定很酷。</h5>
    </div>
</div>

其中控制图片文字垂直居中css

display: flex;
align-items: center;/*垂直*/
justify-content: center;/*水平*/

记录分享学习。