如图所示：类似的这种左右结构，右边是上下两层文字的情况非常常见  要实现右边的文字整体垂直居中，不需要在去慢慢调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; } } } ```