常用布局，左右结构，右边的文字整体垂直居中，上下文字一块整体垂直居中

如图所示：类似的这种左右结构，右边是上下两层文字的情况非常常见

要实现右边的文字整体垂直居中，不需要在去慢慢调margin-top这种了，中间套一个div，外层设置一下flex，然后利用flex的align-items: center;就可以简单的实现垂直居中了。

<div class="LearnRecordWrap">
  <!-- 左边的一块 -->
  <div style="height: 55px;width: 55px;background-color: #ffabcd;border-radius: 50%;"></div>
  <div class="LearnRecordData">
    <!-- ***** 中间套一个div，让上下两层的文字成为一个整体，就可以更好的控制它们的垂直居中了 -->
    <div>
      <div class="recentlyLearn">最近学习</div>
      <div class="lastLearn">上次学习：知识点2 理解photoshop是一款二维图像处理的位图软件</div>
    </div>
  </div>
</div>

样式：

.LearnRecordWrap {
  display: flex;
  flex: 1;
  .LearnRecordData {
    margin-left: 20px;
    // 外层利用flex布局可以很方便的实现垂直居中
    display: flex;
    align-items: center;
    .recentlyLearn {
      font-size: 16px;
      color: #F2F4F7;
    }
    .lastLearn {
      font-size: 12px;
      margin-top: 5px;
      color: #F2F4F7;
    }
  }
}