实现前
可以看出字体与图片并未垂直居中
实现也很简单只需要在父元素中添加
display: flex;（让字体与图片水平排布，并且定义了为flex布局）
flex-flow: column;（让字体与图片垂直排布）
align-items: center;（让字体与图片居中排布）
即可实现
实现后
<div class="container2"><div class="container2-top"><h3>我的常用</h3><span>></span><span>展开全部</span></div><div class="container2-center"><div><img src="img/组 19@2x(3).png" alt=""><div>直播课程</div></div><div><img src="img/组 20@2x.png" alt=""><div>离线课程</div></div><div><img src="img/组 19@2x.png" alt=""><div>家长监管</div></div><div><img src="img/组 19@2x(1).png" alt=""><div>在线解题</div></div><div><img src="img/组 19@2x(2).png" alt=""><div>签到福利</div></div></div><div class="container2-bottom"><div><img src="img/5004283@2x.png" alt=""><div>直播教育·七年级英语</div></div><div><img src="img/m5037851@2x.png" alt=""><div>初中数学进阶套装集</div></div></div>
.container2 {position: absolute;width: 94.9333vw;height: 58.9333vw;background: #FFFFFF;border-radius: 2.6667vw;left: 3vw;top: 18vw;.container2-top {padding-top: 3.7333vw;h3 {display: inline-block;color: #333333;margin-left: 4.5333vw;}span {&:nth-child(2) {float: right;color: #808080;margin-right: 3.2vw;margin-top: -1vw;}}span {&:nth-child(3) {float: right;color: #808080;font-size: 3.7333vw;margin-right: 2vw;}}}.container2-center {display: flex;justify-content: space-around;div {display: flex;flex-flow: column;align-items: center;img {width: 9.0667vw;height: 9.0667vw;}div {margin-top: 2vw;color: #333333;font-size: 2.9333vw;}}}.container2-bottom {display: flex;justify-content: space-around;div {display: flex;flex-flow: column;align-items: center;img {width: 41.8667vw;height: 21.3333vw;border-radius: 1.3333vw;}div {margin-top: 1.6667vw;font-size: 3.4667vw;color: #333333;}}}}
