弹性（flex）布局实现图片水平垂直居中

<div class="photo my1"><img src="./public/img/1.png"><div class="title"><a href=""><p>雷凌汽车上市发布会</p><i class="fa fa-search-plus"></i></a></div></div>

代码中title是遮罩层，鼠标触碰显示，因为每个photo里面的图大小都不一样，实现遮罩层内文字和图标的居中就可以用display：flex；弹性布局

水平垂直居中代码：

.photo .title{opacity: 0;transition: 1.5s;color: white;display: flex;justify-content:center;水平居中align-items: center;垂直居中}

效果图：