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

			

				
				

					
					
雷凌汽车上市发布会
					
					
				
			

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

水平垂直居中代码：

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

效果图：