css如何让图片和文字垂直居中对齐

.box{

    display: flex;

    width: 500px;

    height: 300px;

    margin: 50px auto;

    border: 2px solid #000;

    align-items: center;/*副轴居中*/

}

.box span{/*span是另一个flex布局容器，它本身将自适应填满除p元素外的宽度*/

    flex: 1;

    display: flex;

    justify-content: center;/*主轴居中*/

}